React Context против Zustand: что и когда использовать
Разработчики часто совершают одну и ту же ошибку при работе с состоянием в React. Они неправильно используют Context, а затем винят Context в проблемах с производительностью.
Проблема обычно заключается в одном большом объекте контекста. Когда значение в этом объекте меняется, каждый компонент, использующий этот контекст, перерисовывается. Даже если компоненту нужна лишь одна маленькая часть данных, он всё равно реагирует на любое изменение в объекте.
Если ваши уведомления обновляются каждые 30 секунд, ваш Navbar будет перерисовываться, даже если ему нужно только имя пользователя. Это убивает производительность.
Это можно исправить без использования библиотек. Разделите контексты в зависимости от частоты их изменения.
Вместо одного большого контекста используйте несколько: • UserContext для данных пользователя • UIContext для состояния сайдбара • NotificationContext для уведомлений
Теперь ваш Navbar будет перерисовываться только при изменении данных пользователя. Такое простое разделение решает большинство проблем с производительностью.
Используйте React Context для стабильных значений: • Темы • Статус авторизации • Настройки языка
Context также хорошо работает с Server Components. Zustand работает только на стороне клиента.
Используйте Zustand, когда вам нужны селективные подписки. Zustand позволяет компонентам подписываться на конкретные части (slices) состояния. Если меняется одна часть вашего стора, перерисовываются только те компоненты, которые следят именно за этой частью.
Придерживайтесь этой логики при создании нового состояния:
Используйте React Context, если: • Данные стабильны (тема, авторизация, локаль). • Вам нужно, чтобы это работало с SSR или Server Components. • Вы хотите избежать прокидывания пропсов (prop drilling), разделяя контексты.
Используйте Zustand, если: • Данные часто меняются. • Компонентам нужно отслеживать конкретные части состояния. • Ваша логика сложна.
Постойте. Не используйте ни то, ни другое для данных из API. Если вы загружаете данные с сервера, используйте TanStack Query. Context и Zustand не умеют кэшировать данные или выполнять фоновое обновление (refetching).
Summary: • Один большой объект контекста вызывает лишние ререндеры. Разделите его. • Использование Zustand для стабильных значений избыточно. • Использование Context для часто меняющихся данных вызывает задержки. • Использование Zustand для серверного состояния — это не тот инструмент.