CodePark/ questions / Performance: re-renders & memo
START PRACTICINGPRACTICE
Frontend question · React › Performance: re-renders & memo

Parent re-renders when count changes. Does Child re-render?

const Child = memo(function Child({ onSelect }) {
  return <button onClick={onSelect}>Select</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  return <Child onSelect={() => console.log('selected')} />;
}
Yes, because onSelect is a new function every render

Yes, Child re-renders, because onSelect is a new function every render. memo compares props by reference. An inline arrow is a new function on each render, so the comparison fails.

"No, because Child is wrapped in memo" is the tempting wrong answer. memo only helps when the props keep the same reference. Identical source code does not make two functions equal either. Wrap the handler in useCallback, or define it outside the component.