useState или useReducer
Вопрос
Чем useReducer отличается от useState и как ты решаешь, что использовать?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Оба хранят state и вызывают рендер при изменении, `useState` по сути частный случай редьюсера
useReducer собирает логику переходов в одной чистой функции
Удобен, когда много связанных полей и следующий state зависит от нескольких частей предыдущего
Редьюсер тестируется без React, как обычная функция
`dispatch` стабилен, его удобно передавать вниз или в контекст
Для простых независимых значений useState короче и понятнее
Что могут спросить следом
- Как бы ты передал dispatch глубоко вниз без prop drilling?
- Можно ли делать запросы внутри редьюсера?
- Как типизировать actions в TypeScript?
Разбор
Оба хука хранят локальный state, и оба вызывают рендер при изменении. useState хорош для простых независимых значений: флаг открытия, текст поля. useReducer выбираю, когда переходы становятся логикой: несколько полей меняются вместе, следующий state зависит от предыдущего, есть понятные события вроде «добавили», «удалили», «сбросили». Тогда компонент только отправляет действие, а что из этого следует, решает редьюсер. Это чистая функция, её легко покрыть тестами без рендера. Плюс dispatch стабилен, его можно положить в контекст и не бояться лишних рендеров потребителей. Внутри редьюсера не должно быть побочных эффектов: никаких запросов и мутаций, только вычисление нового state.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация