Где хранить состояние
Вопрос
Как ты решаешь, где хранить состояние в React-приложении: локально, в Context, в сторе или в URL?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Делю состояние на локальное UI, общее клиентское, серверное и состояние в URL
По умолчанию держу локально и поднимаю к общему родителю только при необходимости
От prop drilling сначала пробую композицию, потом Context
Context для редко меняющегося (тема, пользователь), стор с селекторами для частого и большого общего состояния
Серверные данные в кеш-библиотеке (TanStack Query, RTK Query), не в глобальном сторе
Фильтры, пагинацию и вкладки в URL, чтобы работали ссылки и кнопка «назад»
Что могут спросить следом
- Почему Context не стоит использовать как замену Redux для всего?
- Как бы ты поделил большой контекст, который тормозит?
- Где хранить состояние формы на несколько шагов?
Разбор
Я начинаю с вопроса, чьё это состояние. Если это UI одного компонента, например открыт ли дропдаун, оно живёт в useState прямо там. Если двум соседям нужно одно значение, поднимаю его к общему родителю. Когда пропсы начинают проходить через много слоёв, сначала пробую композицию: передаю готовые элементы через children, и промежуточные компоненты перестают знать о данных.
Context использую для того, что меняется редко и нужно многим: тема, локаль, текущий пользователь, клиент API. Для часто меняющегося общего состояния беру стор с подпиской на срез, например Zustand или Redux Toolkit, потому что Context перерисует всех потребителей.
Данные с сервера я не считаю клиентским состоянием. Это кеш, ему нужны ключи, инвалидация, ретраи, поэтому беру TanStack Query или RTK Query. А фильтры, страницу и активную вкладку кладу в URL: тогда ссылку можно отправить коллеге и работает кнопка «назад».
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.