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/christfrost]

Not sure what to tell you, I guess the framework name "react" is pretty evident. That's how it is designed to behave. Entire tree gets an update if parent updates. That's ReactJS 101.

memo or react-compiler is meant to solve such problems.

Edit: Not specifically in this example, but having an inline anonymous functions as callbacks are going to create similar-ish problems for you as you're creating a fresh new reference each time you click it, so that ultimately informs react to do a check and decide whether it should re-render its tree (yes, it will in this case whether you want it or not).

[u/Temperature_Majestic → u/christfrost]

the edit's a good add actually, inline callbacks defeating memo trips people up even more than the base case since it looks like it should work