How do you reduce unnecessary re-renders in a React app?
Quick answer
Keep state local, lift it only when needed, stabilise props (memo/useMemo/useCallback), split components, and use proper keys. Measure first.
In detail
Strategies, in order: profile with React DevTools to find real problems; keep state as low in the tree as possible so updates affect small subtrees; avoid creating new references for props of memoized children; split large components so a frequently-changing piece is isolated; pass children/composition to avoid re-rendering static subtrees; and memoize heavy computations. Don't optimise blindly — most re-renders are cheap.
// isolate the changing part
function Page() { return (<><Header /><LiveCounter /><Footer /></>); }
// only LiveCounter re-renders on its own state changeWhy interviewers ask this: Open-ended question revealing performance method and breadth.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399