> Зачем нужна обертка в виде объекта для setState в React (React, TypeScript)
Уровень: senior · Роль: frontend · Категория: Технические вопросы
Компании: Точка
Стек: React, TypeScript
> Пример ответа
Обертка в виде объекта в setState (или в функциональной форме - колбэк) используется для атомарного обновления состояния, когда новое значение зависит от предыдущего. В React setState может быть асинхронным, и если вы вызываете его несколько раз подряд, передача объекта может привести к потере обновлений, так как React батчит (группирует) вызовы. Функциональная форма гарантирует, что каждый вызов получит актуальное состояние на момент выполнения, а не на момент вызова.
Пример с объектом (проблема):
JAVASCRIPTthis.setState({ count: this.state.count + 1 });this.setState({ count: this.state.count + 1 }); // оба используют одно и то же старое значение
Пример с функцией (корректно):
JAVASCRIPTthis.setState(prevState => ({ count: prevState.count + 1 }));this.setState(prevState => ({ count: prevState.count + 1 })); // каждый раз актуальное значение
В TypeScript это особенно полезно для типизации: функциональная форма принимает prevState с точным типом состояния, что исключает ошибки. Также обертка-объект используется для частичного обновления - React поверхностно сливает переданный объект с текущим состоянием, не затрагивая остальные поля.
> Похожие задачи по frontend
Как реализовать динамическое добавление полей в формах с помощью Formik
Что выделяет React среди других библиотек, что нравится и не нравится в работе с ним
Откуда useLayoutEffect берет информацию о DOM-элементе до рендера в React
Как убрать лишние зависимости в useEffect для избежания лишних рендеров
> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?
Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью