useMemo

Memoize expensive calculations to avoid unnecessary recalculation

Advanced

Core Concepts

useMemo caches the result of a calculation between re-renders
Only recalculates when dependencies change
Use for expensive computations (filtering, sorting, complex math)
Don't overuse — memoization has its own cost

Live Demo

Try toggling dark mode — it's instant! But changing the Fibonacci index recalculates (check console):

⏱️ Triggers recalculation

Dependency changed → runs expensive function

⚡ Uses cached result

Dependency unchanged → instant!

Fibonacci(35)

9,227,465

Open console to see "Calculating fibonacci..." only when slider moves

Without vs With useMemo

❌Without useMemo

function App() {
  const [darkMode, setDarkMode] = useState(false);
  
  // Runs on EVERY render!
  const result = slowFibonacci(40);
  
  return <div>...</div>;
}

✅With useMemo

function App() {
  const [darkMode, setDarkMode] = useState(false);
  
  // Only runs when fibIndex changes
  const result = useMemo(() => {
    return slowFibonacci(fibIndex);
  }, [fibIndex]);
  
  return <div>...</div>;
}

useRef useCallback