AlgoAnimator: Interactive Data Structures

Cached

useMemo()

const cachedValue = useMemo(calculate, [deps])

Caches the result of a calculation between re-renders. It only re-calculates when dependencies change.

useMemo Hook

A hook that caches the result of a calculation between re-renders. It prevents expensive operations from running too often.

Expensive Calculations

Without memoization, heavy calculations run every single time your component renders. This can freeze the UI and feel sluggish.

Caching Results

useMemo stores the result. It only re-calculates if the data it needs (dependencies) has actually changed.

Live Demo

Toggle useMemo ON/OFF. Change the number (dependency) vs. the theme (unrelated). Watch the calculation spinner.

The Problem

Here, expensiveCalculation runs on every render, even if you just toggle a checkbox or type in an unrelated input.

SlowComponent.tsx

function App() {
  const [num, setNum] = useState(1);
  const [dark, setDark] = useState(false);

  // 🐌 Runs on EVERY render. Slow!
  const double = expensiveCalculation(num);

  return (
    <>
      <input value={num} onChange={e => setNum(e.target.value)} />
      <button onClick={() => setDark(!dark)}>Toggle Theme</button>
      <div>Result: {double}</div>
    </>
  );
}

Unoptimized code

The Solution

Wrap the calculation in useMemo. Now it only runs when num changes. Toggling the theme is instantaneous again!

OptimizedComponent.tsx

import { useMemo } from 'react';

function App() {
  const [num, setNum] = useState(1);
  const [dark, setDark] = useState(false);

  // 🚀 Only runs if 'num' changes
  const double = useMemo(() => {
    return expensiveCalculation(num);
  }, [num]); // Dependency Array

  return (
    <>
      <input value={num} onChange={e => setNum(e.target.value)} />
      <button onClick={() => setDark(!dark)}>Toggle Theme</button>
      <div>Result: {double}</div>
    </>
  );
}

Using useMemo

Don't Overuse It

useMemo has a cost (memory + comparison check). Don't use it for cheap calculations like a + b or simple string details.

Rule of Thumb: Only use it for expensive math, transforming large arrays, or when passing objects as dependencies to other hooks (`useEffect`, `useCallback`).