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.