A game panel shows a memoized score display next to a button for logging points. Each click should increment the number shown in the display.
Click Score Point repeatedly. The parent registers each click and updates, but the score shown in the display never changes from the value it had when the page first loaded.
A memoized component only re-renders in response to one specific kind of change - think about what that change needs to look like for the component to notice it.
A memoized component only re-renders in response to one specific kind of change - think about what that change needs to look like for the component to notice it.
Why this fixes it
React.memo compares a component's props between renders and skips re-rendering when it finds no difference. Because ScoreDisplay receives no props, memo always sees an empty prop object and prevents every re-render regardless of what the parent does. The external externalScore variable sits completely outside React's prop and state system, so incrementing it and calling forceUpdate cannot push any new information into the memoized child. Passing score={externalScore} as an explicit prop connects the value to memo's comparison - when handleScore increments externalScore and forceUpdate re-renders the parent, React.memo sees a changed score prop and correctly allows ScoreDisplay to update.