🎯React.memo, useCallback, useMemo

Tool	What it memoizes	Returns
React.memo	Component output	Same JSX if props unchanged
useCallback	Function reference	Same function if deps unchanged
useMemo	Computed value	Cached value if deps unchanged

js
// React.memo — skip re-render if props shallow-equal
const Child = React.memo(({ count }) => <p>{count}</p>);

// useCallback — stable function reference
const handleClick = useCallback(() => { ... }, [deps]);

// useMemo — expensive calculation
const sorted = useMemo(() => data.sort(compareFn), [data]);

Use memo/useCallback/useMemo when:

• Child is in a React.memo wrapper and you pass functions/objects as props
• Computation is genuinely expensive (large sort, filter, etc.)
• Stable reference is required (dependency of useEffect)

Don't use when:

• Component renders quickly anyway (adds overhead)
• Props change on every render (memo comparison is wasted)
• Premature optimization (profile first!)

Rule: Optimize after you measure, not before.

React uses shallow (reference) equality:

js
// Every render creates new reference — memo fails
<Child onClick={() => doThing()} data={{value: 1}} />

// Stable references — memo works
const onClick = useCallback(() => doThing(), []);
const data = useMemo(() => ({value: 1}), []);
<Child onClick={onClick} data={data} />

Deep comparison would be more expensive than the re-render itself.