React Performance and Optimization Interview Questions

React Performance and Optimization Interview Questions

Performance optimization is a common React interview topic, especially for mid-level and senior roles. Here are the common questions and how to answer them.

How do you optimize a React app?

Measure with the Profiler first, then optimize the real bottlenecks: useMemo for expensive computations, stabilize prop references with useCallback, virtualize long lists, code split routes, and debounce expensive inputs.

What is the difference between useMemo and useCallback?

useMemo memoizes a value, useCallback memoizes a function. Both prevent unnecessary work, but they serve different cases: useMemo for expensive computations, useCallback for stable function references passed to memoized children.

What does React.memo do?

React.memo wraps a component so it re-renders only when its props change by reference. It is used with useCallback and useMemo to prevent re-renders when the parent re-renders but the props have not meaningfully changed.

How do you optimize a long list in React?

Virtualize it with a library like react-window, so only the visible items render. Also use stable keys and avoid inline functions as props to reduce re-renders of list items.

What is code splitting and why does it matter?

Code splitting breaks your bundle into chunks loaded on demand, usually via React.lazy and Suspense. It keeps the initial bundle small so users load faster, especially on slow networks.

How to Answer Well

Always start with measurement. Interviewers want to hear that you profile first and optimize only real bottlenecks, not that you sprinkle memoization everywhere. That shows engineering judgment.

The Takeaway

Know how to optimize (measure, then memoize, virtualize, code split, debounce), the difference between useMemo and useCallback, what React.memo does, how to optimize lists, and why code splitting matters. Start every answer with measurement.