How to Use useMemo in React for Performance Optimization

In React, useMemo is a hook that memoizes the result of a function to avoid expensive recalculations on every render. You use it by passing a function and a dependency array, and React will only recompute the value when dependencies change.

Syntax

The useMemo hook takes two arguments: a function that returns a value, and an array of dependencies. It returns the memoized value.

• useMemo(() => computeValue, [deps])
• computeValue: a function that returns the value to memoize.
• [deps]: an array of dependencies that trigger recomputation when changed.

javascript

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Example

This example shows a component that calculates a slow function only when its input changes, using useMemo. It prevents recalculating on every render, improving performance.

javascript

import React, { useState, useMemo } from 'react';

function slowFunction(num) {
  console.log('Running slow function...');
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += num;
  }
  return result;
}

export default function Example() {
  const [number, setNumber] = useState(1);
  const [count, setCount] = useState(0);

  const computed = useMemo(() => slowFunction(number), [number]);

  return (
    <div>
      <h2>useMemo Example</h2>
      <input
        type="number"
        value={number}
        onChange={e => setNumber(parseInt(e.target.value) || 0)}
      />
      <p>Computed value: {computed}</p>
      <button onClick={() => setCount(count + 1)}>
        Re-render ({count})
      </button>
    </div>
  );
}

Output

When you change the number input, the slow function runs and logs 'Running slow function...'. Clicking the button to re-render without changing number does NOT rerun the slow function.

Common Pitfalls

• Not providing dependencies or providing an empty array causes useMemo to never update the memoized value.
• Using useMemo for cheap calculations adds unnecessary complexity.
• Mutating objects inside the memoized function can cause bugs.
• Remember useMemo only optimizes performance; it does not guarantee skipping renders.

javascript

import React, { useState, useMemo } from 'react';

// Wrong: missing dependencies, value never updates
function WrongExample({ a }) {
  const value = useMemo(() => a * 2, []); // [] means no updates
  return <p>{value}</p>;
}

// Right: include dependencies
function RightExample({ a }) {
  const value = useMemo(() => a * 2, [a]);
  return <p>{value}</p>;
}

Quick Reference

useMemo Cheat Sheet:

• useMemo(() => value, [deps]): memoizes value.
• Recomputes only when deps change.
• Use for expensive calculations.
• Do not use for side effects.
• Helps avoid unnecessary recalculations on re-renders.

Key Takeaways

useMemo memoizes a value and recomputes it only when dependencies change.

Use useMemo to optimize expensive calculations inside functional components.

Always provide correct dependencies to avoid stale or never-updating values.

Avoid using useMemo for cheap calculations or side effects.

useMemo helps improve performance but does not prevent component re-renders.