A dashboard shows a cart summary listing how many items are in a fixed product list, alongside a button that toggles a theme label unrelated to the cart. The cart and the theme toggle are independent - clicking the toggle should leave the cart summary's render count unchanged.
Click Toggle Theme repeatedly. The Theme label updates correctly every time, but the Render count number directly below it keeps climbing on every click even though the cart's item list never changes.
The items array stays the same every render thanks to useMemo - but does a stable prop alone decide whether a component re-renders?
The items array stays the same every render thanks to useMemo - but does a stable prop alone decide whether a component re-renders?
Why this fixes it
CartSummary was a plain function component with no React.memo wrapper, so whenever Dashboard re-rendered for the unrelated theme toggle, React unconditionally re-rendered CartSummary too, regardless of whether its items prop had changed. Wrapping the array in useMemo only guaranteed the same array reference was passed on every render - it did nothing to tell React whether CartSummary itself should skip re-rendering, since that decision is made by React.memo's shallow prop comparison, not by how the prop's value was produced. Wrapping CartSummary in memo() adds that comparison step: since items is now the same reference every time, the comparison finds no change and React skips re-rendering CartSummary, leaving the render count frozen.