When can React memoization hurt performance?

Interview framing: Senior frontend performance is about measured trade-offs. Memoization is a tool, not a default coding style.

When memoization helps:

• A component renders often and rendering is measurably expensive.
• A child component receives stable props and can skip work.
• A derived value is expensive to recompute.
• A callback identity matters because it is passed to memoized children or effect dependencies.

When memoization hurts:

• The component is cheap to render.
• Props are always new objects/functions, so React.memo never skips.
• Dependency arrays become complex and bug-prone.
• The comparison cost is higher than the render cost.
• It hides poor state ownership or broad context updates.

How to prove it:

• Use React Profiler before and after.
• Compare render count and render duration for the interaction users care about.
• Check whether the code became harder to maintain.

Better first questions:

• Is state too high in the tree?
• Is context invalidating too much UI?
• Are we rendering a huge list?
• Are expensive calculations happening inside render unnecessarily?

Good closing: "I prefer to profile first, fix state ownership and data volume, then use memoization surgically where it removes real measured work."