A leaderboard lists players with their scores. Clicking Sort by Score should reorder the list from highest score to lowest.
Click Sort by Score - the list does not reorder. Players stay in their original order no matter how many times the button is clicked.
sort() changes the array it's called on - does that change what reference gets handed back to state?
sort() changes the array it's called on - does that change what reference gets handed back to state?
Why this fixes it
players.sort() reorders the array's contents in place and returns the exact same array reference it was called on. Passing that same reference into setPlayers gives React nothing to detect as a change, so React's Object.is comparison sees the identical reference and skips the re-render entirely - the screen never updates even though the underlying array was technically reordered. Spreading the array first with [...players] creates a brand new array reference before sort runs, so the sorted result is a genuinely different object from the one currently in state. React detects the new reference and re-renders with the players in their new order.