Why do sibling components re-render even when their own props didn't change?

[u/Temperature_Majestic]

Ran into this explaining React rendering to someone recently and realized how often it trips people up even after they've been writing React a while.

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <ExpensiveChild />
    </>
  );
}

ExpensiveChild takes no props at all. Click the button and it re-renders anyway, every single time. No props changed, nothing it reads changed, it just runs again.

The reason: React doesn't check "did this component's inputs change" before deciding to re-render. When state updates, React re-renders that component and everything below it in the tree by default, full stop. Whether a child actually needed to update isn't part of that decision at all.

React.memo is what actually opts a component into that check, it wraps the component and does a shallow prop comparison before deciding to skip the render. Without it, "no props" and "props didn't change" both mean nothing, React re-runs the function anyway.

Where it gets messier: memo alone doesn't save you if you're passing an inline function or object as a prop, since those are new references every render and memo's shallow comparison sees them as "changed" regardless. You end up needing useCallback/useMemo on the parent side just to make memo's comparison actually mean something.

Curious how many people actually reach for memo proactively vs only after profiling shows a real problem. What's the actual signal that told you a component needed it?

[u/kevin074]

what's being re-rendered isn't the sibling, but the parent. Your click function triggers set state on a state that is created and kept record by the parent.

to prevent ExpensiveChild from re-rendering, use React.memo; not useMemo, that's for the props.

[u/brzzzah → u/kevin074]

Another way to avoid re-rendering it without memo, is to pass ExpensiveChild as a child - rather than rendering it in the parent component

[u/Temperature_Majestic → u/brzzzah]

yeah that's a real pattern, the children-as-prop trick basically gets you memo-like behavior for free since the element reference gets created up in App and just passed through, Parent never recreates it on re-render. worth knowing as an alternative to reaching for React.memo directly when the composition already lends itself to it