Preventing Unnecessary Re-renders
Unnecessary re-renders happen when a component renders again producing the same output. The main strategies to prevent them: React.memo for components, useMemo/useCallback for values/functions, and proper state structure to avoid cascading updates.
Preventing re-renders is like soundproofing a house — first close the obvious gaps (state colocation), then add insulation (memo), but don't soundproof rooms that aren't noisy (premature optimization).
Key techniques: (1) Move state down — if only one child needs state, don't put it in the parent. (2) Lift content up — pass children as props so the parent's re-render doesn't recreate the children. (3) React.memo + stable props. (4) Split Context by update frequency. (5) Use key to reset instead of effects. A re-render is not inherently bad — React's diffing is fast. Only optimize when you measure actual performance problems with the React Profiler or browser DevTools.
The 'children as props' pattern is underappreciated: <ExpensiveParent>{children}</ExpensiveParent> — when ExpensiveParent re-renders, children is the same JSX reference (created by the grandparent), so React skips diffing the subtree. This is free memoization without React.memo. React DevTools Profiler's 'Why did this render?' shows exactly which props or state changed. The experimental React compiler (React Compiler) aims to eliminate most manual memoization by automatically tracking dependencies and memoizing at the optimal granularity.
I follow a hierarchy: first, colocate state close to where it's used. Then, use the 'children as props' pattern for free memoization. Next, React.memo with stable props via useMemo/useCallback. Finally, split contexts and use external stores for high-frequency data. I always profile before optimizing — React's diffing is fast, and premature optimization adds complexity. The React compiler will automate most of this.
Optimizing without measuring. Adding React.memo, useMemo, and useCallback everywhere makes code harder to read and maintain while often having zero measurable impact. Profile first, optimize the actual bottlenecks.