Зачем при обновлении состояния передавать в setState функцию (например, c => c + 1) вместо явного нового значения?

Проблема асинхронности setState

В React метод setState является асинхронным. Это означает, что после вызова setState состояние не обновляется мгновенно. React может группировать несколько вызовов setState в один пакет (batching) для повышения производительности, особенно в обработчиках событий и жизненных циклах компонентов.

Почему функциональная форма решает проблему

Когда вы передаете в setState объект (новое значение), React просто объединяет его с текущим состоянием. Если у вас есть несколько последовательных вызовов setState, каждый из них будет использовать одно и то же исходное состояние, а не результат предыдущего обновления. Функциональная форма setState принимает функцию, которая получает предыдущее состояние (prevState) и возвращает новое. Это гарантирует, что каждое обновление базируется на самом свежем состоянии.

Пример кода

// Неправильно: при нескольких вызовах счетчик увеличится только на 1
handleClick = () => {
  this.setState({ count: this.state.count + 1 });
  this.setState({ count: this.state.count + 1 });
  // Результат: count увеличится на 1, а не на 2
}

// Правильно: функциональная форма
handleClick = () => {
  this.setState(prevState => ({ count: prevState.count + 1 }));
  this.setState(prevState => ({ count: prevState.count + 1 }));
  // Результат: count увеличится на 2
}

Когда это особенно важно

• При выполнении нескольких обновлений состояния в одном обработчике событий.
• При работе с асинхронными операциями (например, внутри setTimeout или fetch), где batching может не применяться.
• В функциональных компонентах с хуком useState, где функциональная форма также поддерживается.

Вывод

Используйте функциональную форму setState всякий раз, когда новое состояние зависит от предыдущего. Это гарантирует корректность обновлений, особенно при группировке вызовов, и делает код более предсказуемым и устойчивым к ошибкам.