CodePark/ questions / State
START PRACTICINGPRACTICE
Frontend question · React › State

What happens when the button is clicked?

const [items, setItems] = useState(['a', 'b']);

function handleAdd() {
  items.push('c');
  setItems(items);
}
React skips the update because the new state is the same array reference

React skips the update. It compares the new value with the current one using Object.is. items is the same array, so React bails out: it skips the re-render, and the screen does not update.

"The list re-renders showing a, b, c" is the tempting wrong answer. The array contents did change, but the reference did not, and React only checks the reference. React does not throw either, because state is not frozen. The mutation silently succeeds and can show up later, when something else causes a render. Use setItems([...items, 'c']) instead.