React.memo Doesn't Do What You Think

Maddy — Mon, 17 Aug 2026 17:30:13 +0000

What React.memo actually checks

React.memo wraps a component so that, before re-rendering it, React does a shallow comparison of its new props against its previous props. If every prop is === to what it was last time, React skips re-rendering that component and reuses the previous output. "Shallow" is the key word — it compares object and function props by reference, not by deep value, which is exactly where the tool's biggest gotcha lives.

When developers actually run into this

Someone notices a child component re-rendering more than expected, wraps it in React.memo, and sees literally no change — the child keeps re-rendering every time the parent does. The instinct is to assume memo doesn't work or isn't worth using, when the actual cause is almost always that the parent passes a prop whose reference changes on every render, even if its contents are logically the same.

The problem

const Child = React.memo(({ onClick, style }) => {
  console.log('Child rendered');
  return <button onClick={onClick} style={style}>Go</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Increment: {count}</button>
      <Child
        onClick={() => console.log('clicked')}
        style={{ color: 'blue' }}
      />
    </>
  );
}
// Click "Increment" five times.
// logs: "Child rendered" — five times, once per Parent re-render
// The memo comparison never passes, because onClick and style are BOTH new
// object/function references on every single Parent render, regardless of count

The fix

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => console.log('clicked'), []);
  const childStyle = useMemo(() => ({ color: 'blue' }), []);

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Increment: {count}</button>
      <Child onClick={handleClick} style={childStyle} />
    </>
  );
}
// Click "Increment" five times.
// logs: "Child rendered" — once, on the initial mount only
// useCallback and useMemo return the SAME reference across renders (given empty deps),
// so memo's shallow comparison now actually passes

Why this happens (the deeper reason)

JavaScript's === for objects and functions compares identity, not structural equality — two objects with identical contents are still !== if they're different instances in memory, and an inline arrow function or object literal creates a brand-new instance on every render, no matter how identical it looks to the previous one. React.memo's shallow comparison inherits this exact behavior, because doing a deep comparison of every prop on every render would often cost more than the re-render it's trying to avoid — so memo intentionally stays cheap and reference-based, which means it's only as effective as the stability of the references being passed into it. useCallback and useMemo exist specifically to produce a stable reference across renders (as long as their dependencies don't change), which is the missing piece that makes memo actually able to detect "these props are genuinely the same."

DEV Community: Maddy

React.memo Doesn't Do What You Think

What React.memo actually checks

When developers actually run into this

The problem

The fix

Why this happens (the deeper reason)