Почему лучше использовать callback-версию setState?

Почему callback-версия setState предпочтительнее?

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

Как работает callback-версия

Callback-версия setState принимает функцию, которая получает два аргумента: предыдущее состояние (prevState) и текущие пропсы (props). Это гарантирует, что вы всегда работаете с актуальными данными, даже если несколько вызовов setState происходят последовательно.

// Проблема с объектной формой
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
// Результат: count увеличится только на 1, а не на 2

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

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

• При множественных последовательных обновлениях состояния
• При работе с асинхронными операциями, где состояние может измениться между вызовами
• В циклах или обработчиках событий, где setState вызывается несколько раз

Вывод

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