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 - because the reference was identical, it bailed out of the re-render entirely. Replacing with `options.map((o) => o.id === id ? { ...o, score: o.score + 1 } : o)` produces a new array and a new object for the voted option. React detects the new reference and re-renders.