Updating State That Depends on Previous State Using Callback

When the new state is calculated using the previous state, you can update the state with a callback:

const [state, setState] = useState(initialState);
// changes state to `newState` and triggers re-rendering
setState(prevState => nextState);
// after re-render `state` becomes `newState`

Some more examples:

// Toggle a boolean
const [toggled, setToggled] = useState(false);
setToggled(toggled => !toggled);
// Increase a counter
const [count, setCount] = useState(0);
setCount(count => count + 1);
// Add an item to array
const [items, setItems] = useState([]);
setItems(items => [...items, 'New Item']);