React Performance: Avoiding Unnecessary Re-renders

Re-renders are not inherently bad — the problem is wasteful ones. When a large tree re-renders for a change that only a small part cares about, you feel the lag.

Where renders come from

A component re-renders when its parent re-renders, when its props change, or when its own state changes. Understanding the source lets you target the fix.

Memoize what changes rarely

Wrap expensive, stable components in memo and pass stable callbacks via useCallback so memoized children don't re-render on every parent update.

Lift state and split components

Keep state close to where it is used. Splitting a big component into smaller ones confines re-renders to the subtree that actually changed.

Wrapping up

Profile before optimising, then apply these targeted techniques. A surgical approach beats sprinkling memo everywhere.