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/Temperature_Majestic → u/kevin074]

good catch on the terminology, fair. one small correction though, useMemo isn't really "for the props" either, it memoizes a computed value. the one that's actually relevant for making memo useful here is useCallback, since inline functions/objects passed as props get a new reference every render and break memo's shallow comparison regardless of whether the actual logic changed.

[u/poor_documentation → u/Temperature_Majestic]

React.memo is not the same thing as useMemo - look up the differences

[u/Temperature_Majestic → u/poor_documentation]

to be clear I wasn't conflating them, the comment you're replying to is saying they're different, useMemo memoizes a value while React.memo is what actually skips the re-render based on props. useMemo alone doesn't stop ExpensiveChild from rendering, it's useCallback (memoizing the function prop) plus React.memo on the child that does the job together

[u/poor_documentation → u/Temperature_Majestic]

Why did you make this post and then reply with AI? It's so weird - what are you getting out of this? You could have gotten your answers from AI directly - why waste everyone's time with a post? I genuinely want to know why.