This dashboard shows a cart summary listing how many items are in a fixed product list, alongside an unrelated button that toggles a theme label. Clicking the theme button updates the label correctly, but the cart summary's render counter keeps climbing on every click even though the item list itself never changes.
Clicking Toggle Theme updates the Theme label correctly, but the Render count number directly below it increases by one on every single click, even though the cart's item count never changes.
Why this fixes it
CartSummary was a plain function component with no React.memo wrapper, so whenever Dashboard re-rendered, including for the unrelated theme toggle, React unconditionally re-rendered CartSummary too. Wrapping the array in useMemo only guaranteed the same array reference was passed on every render. It did not tell React whether CartSummary itself should skip re-rendering. Wrapping CartSummary in memo() adds a shallow prop comparison. Since items is now the same reference every time, React sees no prop changes and skips re-rendering CartSummary. This demonstrates that useMemo and React.memo solve different problems: - useMemo stabilizes a value's reference. - React.memo decides whether a component should re-render. A stable prop reference alone has no effect unless the receiving component is memoized.