Code Quiz

Memoization Defeated by Inline Props

A React.memo child re-renders every time because of an unstable prop reference.

Codejavascript

const ExpensiveList = React.memo(function ExpensiveList({ config, items }) {
  console.log('rendering list');
  return items.map((i) => <Row key={i.id} item={i} theme={config.theme} />);
});

function Dashboard({ items }) {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => setCount((c) => c + 1), []);

  return (
    <div>
      <button onClick={handleClick}>Count: {count}</button>
      <ExpensiveList config={{ theme: 'dark' }} items={items} />
    </div>
  );
}

Why does ExpensiveList still re-render on every button click despite being wrapped in React.memo?

← PreviousComposition vs memo for re-renders Next →Composition Before Memoization