React.memo vs useMemo: Key Differences and When to Use Each

React.memo is a higher-order component that memoizes a React component to avoid unnecessary re-renders, while useMemo is a hook that memoizes a computed value inside a component to avoid expensive recalculations. Use React.memo to optimize component rendering and useMemo to optimize value calculations within components.

Quick Comparison

Here is a quick side-by-side comparison of React.memo and useMemo highlighting their main characteristics.

Aspect	React.memo	useMemo
Purpose	Memoizes a React component to skip re-rendering	Memoizes a computed value inside a component
Type	Higher-order component (HOC)	React hook
Usage	Wraps a component export or declaration	Called inside a component function
Optimization Target	Component rendering	Expensive calculations or object/array references
Recalculation Trigger	Props change triggers re-render	Dependencies array controls recomputation
Return Value	Memoized component	Memoized value

Key Differences

React.memo wraps a component and tells React to skip rendering it if its props have not changed. It works like a shallow comparison of props and helps avoid re-rendering child components unnecessarily. This is useful when a component renders the same output for the same props.

On the other hand, useMemo is a hook used inside a component to memoize the result of a calculation or object creation. It only recalculates the value when its dependency array changes. This helps avoid expensive computations or recreating objects/arrays on every render, which can improve performance.

In summary, React.memo optimizes whole component rendering based on props, while useMemo optimizes values inside a component based on dependencies. They serve different purposes but can be combined for better performance.

Code Comparison

Example using React.memo to prevent unnecessary re-render of a child component when its props do not change.

jsx

import React from 'react';

const Child = React.memo(({ count }) => {
  console.log('Child rendered');
  return <div>Count: {count}</div>;
});

export default function Parent() {
  const [count, setCount] = React.useState(0);
  const [other, setOther] = React.useState(false);

  return (
    <>
      <Child count={count} />
      <button onClick={() => setCount(c => c + 1)}>Increment Count</button>
      <button onClick={() => setOther(o => !o)}>Toggle Other</button>
    </>
  );
}

Output

When clicking 'Increment Count', 'Child rendered' logs and count updates.
When clicking 'Toggle Other', 'Child rendered' does NOT log, Child does not re-render.

useMemo Equivalent

Example using useMemo to memoize an expensive calculation inside a component, avoiding recalculation unless dependencies change.

jsx

import React from 'react';

function expensiveCalculation(num) {
  console.log('Calculating...');
  let result = 0;
  for (let i = 0; i < 100000000; i++) {
    result += num;
  }
  return result;
}

export default function Example() {
  const [count, setCount] = React.useState(1);
  const [other, setOther] = React.useState(false);

  const computed = React.useMemo(() => expensiveCalculation(count), [count]);

  return (
    <>
      <div>Computed Value: {computed}</div>
      <button onClick={() => setCount(c => c + 1)}>Increment Count</button>
      <button onClick={() => setOther(o => !o)}>Toggle Other</button>
    </>
  );
}

Output

When clicking 'Increment Count', 'Calculating...' logs and computed value updates.
When clicking 'Toggle Other', 'Calculating...' does NOT log, computation is skipped.

When to Use Which

Choose React.memo when you want to prevent a React component from re-rendering unless its props change. This is ideal for functional components that render the same output for the same props and helps reduce unnecessary rendering in component trees.

Choose useMemo when you want to memoize a value or result of an expensive calculation inside a component. It helps avoid recalculating values or recreating objects/arrays on every render, improving performance especially when those values are used in rendering or passed down as props.

Both can be used together: React.memo to optimize component rendering and useMemo to optimize values inside components.

Key Takeaways

React.memo memoizes whole components to skip re-rendering when props don't change.

useMemo memoizes values inside components to avoid expensive recalculations.

Use React.memo for optimizing component rendering based on props.

Use useMemo for optimizing expensive calculations or stable object references.

They serve different purposes but can be combined for better React performance.