useState или useReducer: когда стоит переходить на редукторы в React?

Alex_Kod
2026-07-29 19:42
Привет, коллеги! Часто вижу в pet-проектах и даже в продакшне, что разработчики цепляются за useState до последнего, даже когда состояние начинает напоминать спагетти. У меня самого был случай: форма с 10 полями, каждое с валидацией и зависимостями — и баги сыпались как из рога изобилия. Тогда я переписал это на useReducer, и код стал прозрачнее. Но вопрос: где грань? Давайте разберёмся. useState идеален для простых значений: строка, число, булево. Например, флаг видимости модалки или текущий шаг формы. Но как только у вас появляется объект с вложенными полями и логика обновления зависит от предыдущего состояния, начинаются танцы с бубном: setUser(prev => ({ ...prev, name: e.target.value })). Это читаемо, но если таких полей 5–6, код превращается в кашу. Вот тут и вступает useReducer. Он явно описывает, какие действия возможны: dispatch({ type: 'SET_NAME', payload: e.target.value }). В редьюсере одна точка изменения, и тестировать его легко — это чистая функция. Пример из моего проекта: корзина товаров с добавлением, удалением, изменением количества и применением скидок. На useState я бы утонул в useEffect для синхронизации, а useReducer сделал логику декларативной. Но не будем фанатиками. useReducer добавляет бойлерплейта: нужно объявить типы, написать редьюсер, обернуть в dispatch. Для простого счётчика это оверкилл. Я придерживаюсь правила: если состояние — это одно значение или простой объект без ветвлений, useState. Если есть несколько связанных полей, сложные переходы или зависимость от предыдущего состояния, useReducer — лучший друг. Ещё один момент — производительность. useReducer стабилен: dispatch не меняет ссылку, в отличие от setState, который иногда провоцирует лишние ререндеры, если не использовать callback-форму. В своём проекте с анимациями я перешёл на useReducer для управления UI-состоянием (открытые панели, активные элементы) — ререндеры сократились на 20%. Кстати, не забывайте про библиотеки вроде Zustand или Jotai для сложного глобального состояния. Но на уровне компонента useReducer — это прекрасный компромисс между гибкостью и простотой. Что думаете? У кого-то есть примеры, когда useReducer спас проект или, наоборот, только усложнил жизнь? Жду ваши кейсы!
👎 1

Войдите или зарегистрируйтесь, чтобы ответить.