> Зачем нужна обертка в виде объекта для setState в React (React, TypeScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Точка

Стек: React, TypeScript

> Пример ответа

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

Пример с объектом (проблема):

JAVASCRIPT
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 }); // оба используют одно и то же старое значение

Пример с функцией (корректно):

JAVASCRIPT
this.setState(prevState => ({ count: prevState.count + 1 }));
this.setState(prevState => ({ count: prevState.count + 1 })); // каждый раз актуальное значение

В TypeScript это особенно полезно для типизации: функциональная форма принимает prevState с точным типом состояния, что исключает ошибки. Также обертка-объект используется для частичного обновления - React поверхностно сливает переданный объект с текущим состоянием, не затрагивая остальные поля.

> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?

Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью