Memoization Strategy
Memoization is most effective when an expensive calculation or child render is repeated with the same inputs. It can also stabilize references passed to memoized children.
Do not wrap every component in React.memo or every callback in useCallback. Doing so can add comparison and mental overhead without reducing meaningful work.
First reduce unnecessary state changes and improve component boundaries. Then memoize expensive stable subtrees where profiling demonstrates value.
Memoized child
const Row = memo(function Row({ item, onSelect }) {
return <button onClick={() => onSelect(item.id)}>{item.name}</button>;
});
const onSelect = useCallback(id => {
setSelectedId(id);
}, []);💡 The stable callback helps the memoized child avoid re-rendering when its other props remain equal.
Key Takeaways
- Memoization trades computation for cache/comparison complexity.
- Stable props matter only when consumers can benefit from stability.
- Profile before and after.