Memoization pitfalls

Summary

Memoizing everything adds comparison overhead and code complexity — profile first. Unstable deps ({}, inline functions) invalidate memo every render. useMemo for cheap ops is slower than recomputing. Memo child but pass unstable callback → still re-renders. Compiler auto-memo may reduce manual need — don't fight it blindly.

Code example

function Parent({ items }) {
  const sorted = useMemo(() => [...items].sort(byName), [items]);
  const onClick = useCallback(() => submit(sorted), [sorted]);
  return <Child items={sorted} onClick={onClick} />;
}

Key points

• Memoizing everything adds comparison overhead and code complexity — profile first.
• Unstable deps ({}, inline functions) invalidate memo every render.
• useMemo for cheap ops is slower than recomputing.
• Memo child but pass unstable callback → still re-renders.
• Compiler auto-memo may reduce manual need — don't fight it blindly.

Further reading

• useMemo
• useCallback

Related concepts

• Referential equality
• Race conditions in UI state