React Performance Interview Questions
The performance round decides many senior frontend offers. Here are the questions and how to answer them with judgement.
What triggers a component to re-render?
Three things: its own state changes, its parent re-renders, or a consumed context changes. Props 'changing' is really the parent re-rendering. A re-render doesn't always change the DOM — reconciliation commits only real differences.
When does React.memo actually help?
For components that are expensive to render and re-rendered often with unchanged props. It compares props by reference, so new inline objects/functions defeat it — pair with useMemo/useCallback.
useMemo vs useCallback?
useMemo caches a value; useCallback caches a function. Their real job is referential stability — keeping props stable for a memoized child or an effect dependency, not raw speed.
A memoized child still re-renders — why?
Its props aren't referentially stable; the parent passes a new inline object/function each render, so the shallow comparison always fails. Stabilise with useMemo/useCallback.
What is code splitting?
React.lazy loads a component's code only when first rendered, and Suspense shows a fallback while it loads — typically per route, shrinking the initial bundle.
How do you render a list of 10,000 items?
Virtualization (windowing): render only the rows in the viewport and recycle them on scroll (react-window, @tanstack/react-virtual), so performance is independent of total data size.
Ace the performance round
Re-renders, memoization, code splitting and virtualization — with interview context in the React Interview Kit.
⚡ Get the React Interview Kit → ₹399Frequently asked questions
- How do you find performance problems in React?
- Profile with the React DevTools Profiler to see which components render, how often and why — then optimise the proven hotspot, not a guess.
- Should I memoize everything?
- No. useMemo/useCallback cost memory and a comparison; they only help with React.memo, effect deps, or heavy computation.