A voting panel shows a list of options. Each option has a score that should increment when the user clicks Vote on that row.
Click Vote on any option — nothing changes. The score stays at 0 no matter how many times you click. The button responds but the number never moves.
React has to know that something changed before it will re-render — how does it decide that for state?
React has to know that something changed before it will re-render — how does it decide that for state?
Why this fixes it
setOptions(options) passed the exact same array reference back into state — React uses reference equality to decide whether state changed, and because the reference was identical, it bailed out of the re-render entirely, leaving the scores frozen on screen despite the mutation having run. Replacing this with options.map((o) => o.id === id ? { ...o, score: o.score + 1 } : o) produces a brand-new array and a brand-new object for the voted option. React detects the new reference, schedules a re-render, and the updated score appears.