Avoiding unnecessary renders

A parent rerender rerenders all children by default unless they are memoized and receive stable props. Context updates rerender every consumer. New object or function literals in JSX create fresh references each render, defeating `React.memo`.

Find the cause with React DevTools profiler or why-did-you-render before sprinkling memo. Split context, lift state down, or colocate state with the subtree that needs it. Not every rerender is expensive — measure first.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Profile before optimizing.
• Stabilize props only where profiling proves cost.
• Narrow context and state scope.