Skip to main content

Understanding useMemo in React: When and Why to Use It

Introduction​

React's useMemo hook is often misused or overused. Let's explore the three key scenarios where useMemo actually provides value.

1. Expensive Computations​

When to Use​

When you have computationally expensive operations that don't need to be recalculated on every render.

// Bad: Recalculates on every render
function ProductList({ products }) {
  const sortedProducts = products
    .filter(p => p.inStock)
    .sort((a, b) => b.price - a.price)
    .map(p => ({ ...p, discount: p.price * 0.1 }));

  return <div>{/* render products */}</div>;
}

// Good: Only recalculates when products change
function ProductList({ products }) {
  const sortedProducts = useMemo(() => {
    return products
      .filter(p => p.inStock)
      .sort((a, b) => b.price - a.price)
      .map(p => ({ ...p, discount: p.price * 0.1 }));
  }, [products]);

  return <div>{/* render products */}</div>;
}

2. Referential Equality​

When to Use​

When passing objects or arrays as props or dependencies to other hooks.

// Bad: Creates new object every render
function MapComponent({ center }) {
  const options = {
    center: center,
    zoom: 10,
    markers: [...],
  };

  return <GoogleMap options={options} />;
}

// Good: Maintains reference equality
function MapComponent({ center }) {
  const options = useMemo(() => ({
    center: center,
    zoom: 10,
    markers: [...],
  }), [center]);

  return <GoogleMap options={options} />;
}

3. Hook Dependencies​

When to Use​

When a value is used as a dependency in useEffect or other hooks.

// Bad: Triggers useEffect on every render
function SearchResults({ query }) {
  const searchConfig = {
    fuzzy: true,
    limit: 10,
    query: query
  };

  useEffect(() => {
    // This effect runs on EVERY render because searchConfig is always new
    performSearch(searchConfig);
  }, [searchConfig]);

  return <div>{/* results */}</div>;
}

// Good: Only triggers when necessary
function SearchResults({ query }) {
  const searchConfig = useMemo(() => ({
    fuzzy: true,
    limit: 10,
    query: query
  }), [query]);

  useEffect(() => {
    // Effect only runs when query changes
    performSearch(searchConfig);
  }, [searchConfig]);

  return <div>{/* results */}</div>;
}

Anti-Patterns and Common Mistakes​

Don't Memoize Everything​

// Unnecessary: Primitive values don't benefit
const count = useMemo(() => 42, []);

// Unnecessary: Simple calculations
const doubled = useMemo(() => number * 2, [number]);

// Unnecessary: Already stable references
const handler = useMemo(() => {
  return () => console.log('click');
}, []); // Use useCallback instead

Performance Impact​

Remember that useMemo itself has a cost:

  1. Memory to store the memoized value
  2. Computation to check dependencies
  3. Added code complexity

When to Skip useMemo​

Skip memoization when:

  1. The computation is simple
  2. The value is a primitive
  3. The component always needs fresh data
  4. The component renders infrequently

Best Practices​

  1. Profile First
// Add console.time to measure
function ExpensiveComponent({ data }) {
  const result = useMemo(() => {
    console.time('calculation');
    const value = expensiveCalculation(data);
    console.timeEnd('calculation');
    return value;
  }, [data]);
}
  1. Use DevTools
// React DevTools Profiler can help identify unnecessary re-renders
  1. Document Your Reasoning
// Good: Clear documentation
const memoizedValue = useMemo(
  () => expensiveOperation(props.data),
  [props.data], // Memoized because calculation takes >100ms on large datasets
);

Conclusion​

useMemo is a powerful optimization tool when used correctly. Always measure and profile before adding memoization, and be mindful of the tradeoffs between performance gains and code complexity.

Last updated on