React Js Interview Question

What are the core principles of React.js?

• Component-Based Architecture: UI is built using reusable components.
• One-Way Data Flow: Data flows in one direction (parent to child), ensuring
predictable behavior.
• Virtual DOM: React uses a virtual representation of the DOM to improve
performance.
• Declarative: You describe what the UI should look like, and React updates the
DOM accordingly.
• State and Props: React manages dynamic data using state and passes data
between components using props.

Explain the concept of Virtual DOM in React.js.

• The Virtual DOM is a lightweight copy of the real DOM.
• When the state of a component changes, React updates the Virtual DOM first,
then compares it to the real DOM (this process is called reconciliation).
• Only the differences between the two are updated in the real DOM, making
updates more efficient and fast.

How do you handle state management in React?

• Local State: Managed within a component using useState (for functional
components) or this.state (for class components).
• Global State: For managing state across multiple components, you can use tools
like Context API or external libraries like Redux or MobX.

What is the difference between a functional component and a class component in

React?
• Functional Components: Simple JavaScript functions that return JSX. They don’t
have lifecycle methods but use hooks (e.g., useState, useEffect) for state and
side effects.
 • Class Components: Built using ES6 classes, they have access to lifecycle
methods (componentDidMount, componentDidUpdate, etc.) and use this.state
to manage state.

Can you explain the concept of JSX in React?

• JSX (JavaScript XML) is a syntax extension of JavaScript that allows you to write
HTML-like code within JavaScript.
• It makes the structure of the UI easier to visualize and write.
• JSX gets compiled into regular JavaScript calls (React.createElement) behind the
scenes.

What is the purpose of useEffect hook in React?

• useEffect is a hook used to handle side effects in functional components.
• Side effects include things like data fetching, subscriptions, timers, and manually
updating the DOM.
• It runs after the component renders and can also clean up effects if necessary
(e.g., removing subscriptions).

How do you manage side effects in a React application?

• Side effects (e.g., API calls, timers) are managed using the useEffect hook in
functional components.
• useEffect runs after rendering and can be controlled to run only when specific
dependencies change.
• In class components, side effects are handled using lifecycle methods like
componentDidMount, componentDidUpdate, and componentWillUnmount.

What is the Context API in React, and when would you use it?
• Context API is a way to pass data through the component tree without manually
passing props at every level.
• It’s useful for global state or theme management where many components need
access to the same data (e.g., user authentication status, theme settings).
How do React hooks improve the way we write components?
• Hooks allow you to use state and lifecycle features in functional components,
which were previously only available in class components.
• They simplify code and make it easier to reuse stateful logic between
components without the need for complex class hierarchies or higher-order
components (HOCs).

What are higher-order components (HOC) in React?

• An HOC is a function that takes a component as input and returns a new
component with added functionality.
• HOCs are used to reuse code and share logic across multiple components (e.g.,
handling authentication, logging, or fetching data).

What is Redux, and how does it work with React?

• Redux is a state management library used to manage the global state of an
application.
• In React, Redux helps manage shared state across components, allowing
components to access and update the state consistently without passing props
manually.
• It works with a store, actions, and reducers to handle state changes in a
predictable manner.

Explain the concept of a "store" in Redux.

• The store is the central place where all the state of the application is stored.
• It holds the application state and provides methods to:
1. Get the current state.
2. Dispatch actions to update the state.
3. Subscribe to state changes.
How does the Flux architecture differ from Redux?
• Flux is an architecture pattern for managing unidirectional data flow in
applications, where there are multiple stores.
• Redux simplifies this by using a single store for the entire application and
centralizes state logic.
• In Redux, actions are pure objects, and state changes are handled by pure
functions (reducers), whereas Flux can have more complex and different ways to
handle state updates.

What are actions and reducers in Redux?

• Actions: Plain JavaScript objects that describe what happened (e.g., { type:
'INCREMENT' }). They are dispatched to trigger state changes.
• Reducers: Pure functions that take the current state and an action as input and
return a new state based on the action (e.g., updating a counter).

How do you handle asynchronous actions in Redux?

• Redux itself handles synchronous actions, but for asynchronous actions (like API
calls), you can use middleware like Redux Thunk or Redux Saga.
• Thunk allows you to return a function instead of an action object, and inside this
function, you can perform asynchronous operations like fetching data.

What are the benefits of using Redux Toolkit?

• Redux Toolkit simplifies Redux development by:
o Reducing boilerplate code (e.g., createSlice combines action creators and
reducers).
o Providing good defaults and best practices.
o Offering built-in tools like Thunk for handling asynchronous actions.
• It’s the recommended way to write Redux logic.
How do you integrate Redux with a React application?
1. Install redux and react-redux libraries.
2. Create a store and pass it to the React app using the <Provider> component.
3. Connect React components to the Redux store using the useSelector hook (to
access state) and the useDispatch hook (to dispatch actions).

Can you explain the concept of middleware in Redux?

• Middleware in Redux provides a way to extend the store's functionality by
intercepting dispatched actions before they reach the reducer.
• It is commonly used for logging, error reporting, and handling asynchronous
actions (e.g., with Redux Thunk or Redux Saga).
What is JSON Web Token (JWT), and how does it work?
• JWT is a compact, URL-safe token used for securely transmitting information
between parties.
• It contains three parts: Header, Payload, and Signature.
o Header: Describes the type of token and the algorithm used for signing.
o Payload: Contains user information or claims (e.g., user ID, roles).
o Signature: Verifies that the token hasn’t been tampered with.
• JWTs are used for authentication where a server generates the token after a user
logs in, and the client stores it (usually in localStorage or cookies) and sends it
with each request for protected routes.

How do you implement JWT authentication in a React application?

1. Login: User submits credentials, and the server responds with a JWT upon
successful authentication.
2. Store Token: The JWT is stored on the client side, typically in localStorage or
cookies.
3. Send Token: On subsequent requests to protected resources, include the token
in the Authorization header (e.g., Bearer token).
4. Verify Token: The server verifies the JWT on each request to authenticate the user.
What are the security considerations when using JWT?
• Avoid Storing JWT in LocalStorage: Store it in HTTP-only cookies to prevent cross-
site scripting (XSS) attacks.
• Token Expiry: Set short expiration times and refresh tokens to limit risks.
• Use HTTPS: Always use HTTPS to prevent token interception.
• Don’t Store Sensitive Data in Payload: The JWT payload is base64-encoded, not
encrypted, so don’t store sensitive information.

What is a RESTful API, and how does it differ from SOAP?

• RESTful API: A style of architecture that uses HTTP methods (GET, POST, etc.) for
communication between a client and server. It’s stateless, meaning each request
contains all the information needed for the server to fulfill the request.
• SOAP (Simple Object Access Protocol): A protocol for exchanging structured
information using XML. It’s more complex and uses its own communication
standards.
• Difference: REST is simpler and uses standard web technologies (like JSON),
while SOAP is more rigid and designed for larger, more complex systems.

How do you consume RESTful APIs in a React application?

• Use JavaScript methods like fetch() or libraries like Axios to make HTTP requests.
o Example using fetch:

What are HTTP methods, and how are they used in RESTful services?
 • GET: Retrieve data from the server (e.g., fetching user data).
• POST: Send data to the server to create new resources (e.g., creating a new user).
• PUT: Update an existing resource on the server (e.g., updating user info).
• DELETE: Remove a resource from the server (e.g., deleting a user).
• PATCH: Partially update a resource.

How do you handle errors when calling a RESTful API?

Use try-catch blocks or .catch() in promises to catch errors.
Check for HTTP status codes (e.g., 404 for not found, 500 for server errors) and handle
them appropriately in the UI (e.g., displaying error messages).

How do you optimize a React application for production?

Minify and bundle JavaScript files to reduce file sizes using tools like Webpack.
Use code splitting and lazy loading to load parts of the application only when needed.
Cache assets for faster subsequent loading.
Use a CDN to serve static files globally and reduce latency.
Optimize images and other static resources.

What is Babel, and why is it used in modern JavaScript applications?

• Babel is a JavaScript compiler that transforms modern JavaScript (ES6+) into a
version that can run in older browsers.
 • It also supports JSX compilation (for React) and other syntax that is not natively
supported by all environments.

How do you implement code splitting in a React application?

• Code splitting breaks the application into smaller bundles, loading them only
when needed.
• In React, use React.lazy and Suspense to load components on demand.

How do you approach responsive design in a React application using Tailwind

CSS?
Tailwind CSS provides built-in utility classes that make responsive design easy by
applying styles based on screen sizes.
Tailwind uses breakpoints like sm, md, lg, and xl to define responsive styles for different
screen widths.
You can write classes like md:p-4 or lg:w-1/2 to apply different padding or width at
different screen sizes.
In this example:
o p-2: Applies padding for small screens.
o md:p-4: Increases padding for medium screens.
o lg:text-xl: Increases font size for large screens.
Steps:
1. Use responsive utility classes in your JSX to handle different screen sizes.
2. Tailwind's mobile-first approach makes sure styles apply to smaller screens first,
then adapt for larger screens.
3. Combine flexbox and grid utilities in Tailwind for responsive layouts (e.g., flex-col
md:flex-row to switch between column and row layouts).
This approach helps create responsive designs with minimal effort and clear,
maintainable code.
How do you handle routing in a React application?
Use React Router to manage navigation between different pages or components.
Install React Router (react-router-dom), then define routes using the Route and Switch
components.
Explain the concept of React Fragments.
React Fragments allow you to group multiple elements without adding an extra DOM
node.
Use <></> or <React.Fragment> to avoid unnecessary <div> tags.

What is the difference between useMemo and useCallback hooks?

useMemo: Memoizes the result of a function to avoid re-computation on every render.
useCallback: Memoizes the function itself to avoid re-creating it unless its
dependencies change.
Use useMemo when you want to memoize values, and useCallback when you want to
memoize functions.
How do you optimize the performance of a React application?
Memoization: Use React.memo, useMemo, and useCallback to prevent unnecessary
re-renders.
Lazy Loading: Implement code splitting and lazy load components using React.lazy.
Avoid Inline Functions: Use useCallback to avoid creating new function instances in
every render.
Optimizing Lists: Use keys in lists and only re-render items that change.

What are React Portals, and when would you use them?
React Portals allow you to render components outside the DOM hierarchy of the parent
component.
They are useful for modals, tooltips, or any component that needs to overlay other
elements.
Example:

How do you implement error boundaries in React?

Error boundaries are React components that catch JavaScript errors in child
components and display a fallback UI.
You implement them using class components with the componentDidCatch and
getDerivedStateFromError methods.
What is the purpose of React keys in lists?
Keys help React identify which items have changed, been added, or removed in a list.
They improve rendering performance by allowing React to update only the items that
change, not the entire list.
Always use unique identifiers (like id) as keys, not array indexes.

How do you manage forms in React?

Use controlled components where form inputs are tied to the component's state using
the value and onChange attributes.
Explain the concept of PropTypes in React.
PropTypes is a built-in type-checking feature in React that ensures components receive
the correct props.

How do you deal with cross-cutting concerns in React?

Cross-cutting concerns like authentication, logging, or theming can be managed using
Higher-Order Components (HOCs), React Context API, or custom hooks.
HOCs and hooks allow you to reuse logic across multiple components, while Context
API helps manage global state without prop drilling.
What is the difference between local state and global state in React?
Local state: Managed within a specific component using useState or useReducer. It is
accessible only within that component.
Global state: Managed across multiple components, allowing state sharing between
components. Tools like Context API or Redux are used to manage global state.

How do you handle state in large-scale React applications?

Use Redux or Context API for centralized state management.
Organize your state into modules or slices in tools like Redux Toolkit.
Use Redux middleware (e.g., Redux-Thunk, Redux-Saga) to manage asynchronous
actions and side effects.

What is the role of selectors in Redux?

Selectors are functions that retrieve specific data from the Redux state.
They help avoid repeating logic and make it easier to get derived or filtered state.
Example:

How do you manage side effects in Redux using Redux-Saga or Redux-Thunk?

Redux-Thunk: Allows dispatching functions (instead of actions) to handle async logic.
You can make API calls inside these functions and dispatch actions based on the
result.

Explain the concept of immutability in Redux.

In Redux, immutability means the state should never be modified directly. Instead, you
return a new state object when changes are made.
This ensures predictable state changes, helps with time travel debugging, and allows
React to optimize re-rendering.
How do you handle pagination in a Redux application?
Store the current page number and items per page in the Redux state.
Fetch data based on the current page, and update the state when the page changes
What are the benefits of using the Context API over Redux?
Context API is simpler to set up for small to medium-sized applications and requires
less boilerplate.
Use Context when you have less complex global state needs and fewer actions.
Redux is better suited for large-scale applications where state management complexity
grows due to features like middleware, debugging, and async flows.
How do you persist Redux state across page reloads?
Use libraries like redux-persist to automatically save the Redux state to localStorage or
sessionStorage.

What is the purpose of combineReducers in Redux?

combineReducers allows you to split your Redux state into multiple smaller state slices
and manage them with separate reducers.
It merges these smaller reducers into a single root reducer.
How do you debug a Redux application?
Use Redux DevTools to track actions, inspect the state, and time travel through actions.
Log actions and state changes using console.log or middleware like redux-logger.
Ensure your reducer is pure and that state updates are immutable.
What is OAuth2, and how does it differ from JWT?
OAuth2: An open standard for authorization, often used to allow third-party services
access to user data without sharing credentials (e.g., logging in with Google).
JWT (JSON Web Token): A compact, self-contained token used for secure data
exchange, typically for authentication.
Difference: OAuth2 is for authorization (allowing access), while JWT is for
authentication (proving identity).

How do you implement role-based access control in a React application?

Define roles (e.g., admin, user) in your backend or state management.
Conditionally render UI components or restrict access based on the user's role

What are the common security risks in front-end development?

XSS (Cross-Site Scripting): Injecting malicious scripts via forms or URLs.
CSRF (Cross-Site Request Forgery): Trick users into submitting unauthorized requests.
Insecure token storage: Storing tokens in localStorage without encryption.
Clickjacking: Tricking users into clicking hidden buttons.

How do you securely store tokens on the client-side?

Store tokens in HTTP-only cookies for better security (they cannot be accessed by
JavaScript).
Avoid storing tokens in localStorage or sessionStorage as they are vulnerable to XSS
attacks.
Use secure, same-site cookies to prevent CSRF attacks.

How do you handle pagination when consuming a RESTful API?

Send page number and items per page as query parameters in the API request.
Update the UI with the fetched data, and manage the state of the current page and total
items.

How do you handle authentication and authorization when consuming an API?

Authentication: Send user credentials (e.g., username/password) and receive a token
(e.g., JWT).
Authorization: Attach the token to API requests in the headers (Authorization: Bearer
<token>) to ensure the user has permission to access specific data or actions.

What are the best practices for caching API responses in a React application?
Use browser cache or caching libraries (e.g., SWR, React Query) to store API responses
temporarily.
Implement ETags or Last-Modified headers to validate if the cached response is still
fresh.
Cache GET requests only, and refresh cache when data changes.

How do you handle rate-limiting when interacting with an API?

Implement retry logic with exponential backoff when a rate limit error (429) occurs.
Use throttling to limit the number of requests sent over a certain time.
Display a user-friendly message when too many requests are being made.
Explain the concept of optimistic UI updates when working with APIs.
Optimistic UI: Update the UI immediately before the server confirms the action, making
the app feel faster.
Example: When submitting a form, you update the list locally, assuming success, then
handle errors if the server response fails.

How do you set up a development environment for a React application?

Install Node.js and npm/yarn.
Use Create React App (CRA) or Vite to quickly set up a React project.
Install development tools like ESLint, Prettier, and React DevTools for code quality and
debugging.

What are code-splitting and lazy loading, and how do they improve performance?
Code-splitting: Breaking the code into smaller bundles that are loaded on demand.
Lazy loading: Load components only when they are needed, reducing the initial load
time.

How do you implement Continuous Integration/Continuous Deployment (CI/CD)

for a React application?
Use platforms like GitHub Actions, CircleCI, or Jenkins to automate building and testing
the app on every commit.
For deployment, use services like Netlify, Vercel, or Heroku to automatically deploy the
app after tests pass.

What is the purpose of linters like ESLint in a React project?

ESLint helps identify and fix code quality issues, such as errors, bad patterns, and
stylistic problems.
It ensures consistency across the project, making the code more readable and less
prone to bugs.

How do you automate testing in a React application?

Use Jest for unit and integration testing.
Use React Testing Library to test components in a way that resembles how users
interact with your app.
Set up end-to-end testing with tools like Cypress to simulate user behavior across the
entire application.
What are the different phases of the React component lifecycle?
Mounting: When the component is created and inserted into the DOM (e.g.,
componentDidMount).
Updating: When the component’s props or state change, causing a re-render (e.g.,
componentDidUpdate).
Unmounting: When the component is removed from the DOM (e.g.,
componentWillUnmount).
How do you use the componentDidMount method in a class component?
componentDidMount is used after the component is rendered. You can use it to
perform actions like fetching data from an API or subscribing to events.

What is the difference between componentDidUpdate and

shouldComponentUpdate?
componentDidUpdate: Called after the component is updated (re-rendered). It’s useful
for tasks that rely on DOM changes.
shouldComponentUpdate: Called before the update happens. It allows you to decide
whether the component should re-render based on new props or state. Returning false
prevents the re-render.
How do you handle cleanup in functional components using hooks?
Use the useEffect hook with a cleanup function. The cleanup function runs when the
component unmounts or when the effect is re-triggered.

What is the purpose of the useEffect hook, and how does it differ from lifecycle
methods in class components?
useEffect is used to perform side effects like data fetching, DOM manipulation, or
subscriptions. It combines the functionality of lifecycle methods like
componentDidMount, componentDidUpdate, and componentWillUnmount.
The main difference is that useEffect works in functional components and lets you
manage side effects more flexibly.
How do you use the useState hook to manage state in functional components?
useState is used to declare state variables in functional components.
. Explain the concept of custom hooks in React. Can you provide an example?
Custom hooks are functions that allow you to reuse logic between components. They
follow the same rules as React hooks but encapsulate complex logic. Example: A
custom hook for fetching data:
What are the advantages and disadvantages of using controlled vs. uncontrolled
components in React?
Controlled components:
Advantage: The form elements are controlled by React state, making
validation and UI updates more predictable.
Disadvantage: More boilerplate code and frequent state updates can affect
performance.
Uncontrolled components:
Advantage: Simpler and requires less code since form inputs manage their
own state.
Disadvantage: Harder to manage and validate because you don’t have direct
control over the state of form inputs.
What is the container-presentational component pattern in React?
• Presentational components: Focus on how things look (UI). They receive data and
callbacks through props.
• Container components: Focus on how things work (logic). They manage state and
pass props to presentational components.
This pattern helps separate logic from UI, making the code cleaner and more reusable.
How do you structure a large-scale React application?
Use a modular approach by dividing your app into feature-based folders (e.g.,
components, pages, services).
Use atomic design principles (atoms, molecules, organisms) for components.
Separate concerns like state management (using Redux or Context) and routing.
Ensure the project has clear folder structures for reusable components, hooks,
utilities, and styles.

13. Explain the concept of higher-order components (HOCs) in React. Can you
provide an example?
HOCs are functions that take a component and return a new component with
enhanced functionality. Example: Adding authentication to a component.
What are React Refs, and when should they be used?
Refs provide a way to access and interact with DOM elements directly or store
values between renders without causing a re-render.
Use refs for managing focus, animations, or integrating third-party libraries that
require direct DOM access.
How do you handle animations in a React application?
• Use CSS animations for simple effects.
• For complex animations, use libraries like Framer Motion or React Spring for
declarative animations.
• You can also use React Transition Group for animations when components
enter or leave the DOM.
How do you optimize the rendering performance of React components?
• Use React.memo to prevent re-rendering of functional components when props
haven’t changed.
• Optimize rendering logic by using useMemo and useCallback to memoize values
and functions.
• Avoid unnecessary state updates and avoid inline functions in render methods.
• Use lazy loading for components and code splitting to reduce the initial load
time.

23. How do you prevent unnecessary re-renders in a React application?

• Use React.memo for functional components to avoid re-renders when props
haven’t changed.
• Use useCallback to memoize functions and prevent them from changing on every
render.
• Optimize state updates by ensuring that updates are meaningful and avoid
causing unnecessary re-renders.

24. What is the difference between React.memo and useMemo?

• React.memo: A higher-order component that prevents re-renders of functional
components if props haven’t changed.
• useMemo: A hook used within a functional component to memoize values or
calculations between renders.
26. What is code splitting, and how do you implement it in a React application?
• Code splitting is the practice of splitting your code into smaller bundles that are
loaded on demand to improve performance.
• Use dynamic import() and React.lazy to split code by loading components only
when they are needed.

27. How do you optimize the loading performance of images in a React

application?
• Use responsive images with srcset and sizes attributes.
• Compress images and use modern formats like WebP.
• Implement lazy loading for images using libraries or native browser support with
the loading="lazy" attribute.

28. How does React's reconciliation algorithm work?

• React’s reconciliation algorithm (also known as diffing) efficiently updates the
DOM by comparing the previous and current virtual DOMs.
• It uses a diffing algorithm to determine the minimal set of changes required to
update the actual DOM.

29. How do you use the React.PureComponent class to optimize performance?

• React.PureComponent is a base class that implements a shallow comparison of
props and state. It prevents unnecessary re-renders if the props and state haven't
changed.
How do you monitor and profile the performance of a React application?
• Use React DevTools to analyze component rendering and performance.
• Use the Chrome DevTools Performance tab to record and analyze the app’s
performance.
• Implement performance monitoring tools like Sentry or New Relic to track
performance in production.
What are some common use cases for the useEffect hook?
• Fetching data from an API.
• Setting up subscriptions or timers.
• Manually interacting with the DOM (e.g., focus management).
Cleaning up resources (e.g., unsubscribing from a service).
21. How do you lift state up in a React application?
Lifting state up means moving state to the nearest common ancestor of
components that need it. This allows child components to share and update the
same state.
How to do it:
Move state to the parent component.
Pass state and state-updating functions down to child components via props.
Child components call the function to update the state.

22. What are some ways to manage global state in a React application?
• Context API: Useful for simple global state management.
• Redux: A popular state management library for complex state scenarios.
• Recoil: A state management library for React with a focus on performance and
scalability.
• Zustand: A simple state management library that provides a minimalistic API.

23. How does the Context API work in React?

• Context API allows you to create a global state that can be accessed by any
component in the component tree.
• How it works:
1. Create Context: Use React.createContext() to create a context.
2. Provide Context: Wrap your components with a Context.Provider to pass
the state down.
3. Consume Context: Use useContext or Context.Consumer to access the
context value in any component.

24. What are the advantages and disadvantages of using the Context API for state
management?
• Advantages:
o Simple and built into React.
 o Avoids prop drilling by providing a global state.
• Disadvantages:
o Can lead to performance issues if the context value changes frequently.
o Not as powerful as Redux for complex state logic or large applications.

25. How do you implement Redux in a React application?

• Steps to implement Redux:
1. Install Redux and React-Redux.
2. Create Actions: Define actions to describe state changes.
3. Create Reducers: Write reducers to handle actions and update state.
4. Create Store: Combine reducers and create the Redux store.
5. Provide Store: Use <Provider> from react-redux to make the store available
to your components.
6. Connect Components: Use connect or useSelector and useDispatch to
interact with the store.

26. What is the purpose of a reducer function in Redux?

• Reducer function: It specifies how the state changes in response to actions.
• How it works: Takes the current state and an action, and returns a new state
based on the action type.

27. How do you connect a React component to the Redux store?

• Using connect:
1. Import connect from react-redux.
2. Map state and dispatch to props.
3. Wrap your component with connect.
32. What is react-router, and how does it work?
• React Router: A library for handling routing in React applications.
• How it works: It uses components like Route and Link to manage navigation and
render different components based on the URL.
33. How do you create nested routes in react-router?
• Nested Routes: Define routes inside other routes.
• Example

What is the difference between Link and NavLink in react-router?

• Link: Provides navigation to a different route.
• NavLink: Similar to Link, but can apply styles to the active link based on the
current route.
35. How do you implement dynamic routing in React?
• Dynamic Routing: Use route parameters to handle dynamic content.
37. What is the purpose of Redirect in React Router?
• Redirect: Used to navigate to a different route programmatically, often used after
form submissions or login actions.
38. How do you protect routes in a React application using authentication?
• Protected Routes: Check if the user is authenticated before rendering a route.
Redirect to login if not authenticated.

How do you implement lazy loading of routes in React?

Lazy Loading: Use React.lazy and Suspense to load components only when needed
What are some common causes of performance issues in a React application?
• Unnecessary re-renders
• Large component trees
• Expensive calculations or operations inside components
• Inefficient state management
42. How do you implement memoization in React components?
• Memoization: Use React.memo to prevent re-rendering of components that
receive the same props.
44. What is the purpose of the shouldComponentUpdate lifecycle method?
shouldComponentUpdate: Determines if a component should re-render based on
changes in props or state.
45. How do you handle large lists in React efficiently?
Use virtualization libraries like react-window or react-virtualized to render only
visible items.
46. How does the useTransition hook improve performance in React?
useTransition allows you to mark state updates as non-urgent, keeping the UI
responsive during updates.
47. How do you measure the performance of a React application?
Use React DevTools for profiling and performance profiling tools in the browser to
measure and analyze performance.

49. How do you implement server-side rendering (SSR) in React?

Use frameworks like Next.js or libraries like ReactDOMServer to render React
components on the server and send HTML to the client.
50. How do you optimize a React application for mobile devices?
Implement responsive design with CSS frameworks like Tailwind CSS or media
queries.
Optimize performance by minimizing JavaScript and using lazy loading.