Performance Optimization in React — Interview Questions & Answers

Ques 1: What is performance optimization in React?

Ans: Performance optimization means making React apps faster and more efficient by reducing unnecessary re-renders, optimizing rendering logic, and managing resources properly.

Ques 2: Why is performance optimization important in React?

Ans: Because React apps can slow down due to:

• Frequent re-renders
• Large component trees
• Heavy API calls
• Complex computations

Ques 3: What causes React components to re-render?

• Change in state or props
• Parent component re-renders
• Context value change
• Force update (forceUpdate())

Ques 4: How can we prevent unnecessary re-renders?

• Use React.memo for functional components
• Use PureComponent for class components
• Use useCallback and useMemo hooks
• Keep components small and focused
• Avoid changing object or array references unnecessarily

Ques 5: What is React.memo() and how does it help?

Ans: React.memo() is a higher-order component that prevents a functional component from re-rendering unless its props change.

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return <p>Hello {name}</p>;
});

Ques 6: What is the difference between React.memo and PureComponent?

Feature	React.memo	PureComponent
Works with	Functional Components	Class Components
Comparison	Shallow props comparison	Shallow state & props comparison
Usage	Wraps around component	Extends React.PureComponent

Ques 7: What is lazy loading in React?

Ans: Lazy loading is a technique to load components only when needed, improving the app’s initial load time.

Example:

const About = React.lazy(() => import('./About'));

Ques 8: What is code splitting in React?

Ans: Code splitting divides your bundle into smaller chunks so that the browser only loads the code required for the current view.

React supports this through dynamic imports and React.lazy.

Ques 9: How does React.Suspense help with lazy loading?

Ans: React.Suspense allows you to show a fallback (like a loader) while the component is being loaded dynamically.

<Suspense fallback={<p>Loading...</p>}>
  <About />
</Suspense>

Ques 10: What is list virtualization in React?

Ans: List virtualization is a performance technique that renders only visible items in a large list instead of rendering all elements at once.

Libraries:

• react-window
• react-virtualized

Ques 11: How does react-window improve performance?

Ans: It renders a small window of visible items and dynamically reuses DOM nodes as the user scrolls, significantly improving memory usage and rendering speed.

Ques 12: What is the difference between throttling and debouncing?

Concept	Description	Example
Throttling	Executes function at regular intervals	Scroll event
Debouncing	Delays function until user stops triggering	Search input

Ques 13: What is memoization in React?

Ans: Memoization is the process of caching results of expensive computations so they don’t run again unless inputs change.

Hooks used:

• useMemo()
• useCallback()

Ques 14: What is useMemo() and when to use it?

Ans: useMemo() memoizes a computed value to avoid recalculating it unnecessarily.

const result = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Use it for:

• Heavy calculations
• Derived state from props/state

Ques 15: What is useCallback() used for?

Ans: useCallback() memoizes a function so that it’s not recreated on every render.

const handleClick = useCallback(() => setCount(c => c + 1), []);

Use it when passing functions as props to child components.

Ques 16: What is React Profiler?

Ans: React Profiler (available in React DevTools) measures how often components render and how long rendering takes, helping identify performance bottlenecks.

Ques 17: How can you optimize rendering of large lists?

• Use list virtualization (react-window, react-virtualized)
• Use key props properly
• Avoid inline functions and objects
• Use pagination or infinite scroll

Ques 18: What is the impact of using inline functions in JSX?

Ans: Inline functions create new references on every render, causing unnecessary re-renders of child components.

Ques 19: How can you optimize image loading in React?

• Use lazy loading for images
• Use responsive image formats (WebP, AVIF)
• Compress images
• Use CDN for static assets

Ques 20: What is server-side rendering (SSR) and how does it improve performance?

Ans: SSR renders React components on the server before sending HTML to the client. It reduces time-to-first-paint and improves SEO.

Frameworks: Next.js, Remix

Ques 21: What are React fragments and how do they help?

Ans: Fragments (<>...</>) avoid adding extra DOM nodes, making rendering slightly more efficient than wrapping elements in <div>.

Ques 22: What are some general React performance best practices?

• Use production build (npm run build)
• Use code splitting and lazy loading
• Keep components pure and small
• Avoid anonymous functions and inline objects
• Use React.memo, useMemo, useCallback wisely
• Use virtualization for large data

Ques 23: How do you handle performance issues caused by large re-renders?

• Split components into smaller parts
• Use React DevTools Profiler
• Memoize values and callbacks
• Avoid deeply nested state

Ques 24: What is hydration in React?

Ans: Hydration is the process of attaching event listeners to server-rendered HTML, making it fully interactive on the client side (used in SSR apps).

Ques 25: How does React’s reconciliation algorithm improve performance?

Ans: React uses the virtual DOM diffing algorithm to compare previous and new trees efficiently, updating only changed parts of the DOM.