Immutable updates

React redraws a screen when state changes. It checks for a change by reference: is this the same object as before? If you push to an array or change an object's field in place, the reference stays the same, so the screen may not update.

That is why you always create new values instead, with the spread operator and array methods. To add, write [...todos, newTodo]. To remove, write todos.filter((t) => t.id !== id).

To change one item, write todos.map((t) => (t.id === id ? { ...t, done: true } : t)). Spread is shallow: it copies only the top level, so a nested object needs copying at each level you change. Learning this now, in plain JavaScript, saves days of confused debugging once you add state to components.