Проблемы React Context
Использование контекста реакта и хуков, упрощает управление состоянием приложения. В небольших проектах уж и вовсе позволяет отказаться от использования менеджеров состояний. Но у него есть ряд проблем, о которых необходимо знать.
1️⃣ Дизайн по умолчанию, не совсем безопасен.
1. Логика хранения стейта и его изменения разбросана между контекстом и использующими его компонентами
2. Значение value контекста необходимо мемоизировать с помощью useMemo
3. Если компонент, не нашёл контекст в родительских узлах — он будет молча использовать значения по-умолчанию. Мы не увидим никаких предупреждений или ошибок
Эти проблемы и их решения рассматривается в статье React: How I learned to create optimized contexts
✅ Вместо использования контекста напрямую, нужно:
- Указать null в качестве значения по-умолчанию для контекста
- Реализовать useSafeContext — кастомный хук, который будет проверять, что значение не null
- Реализовать SafeContext — компонент, который содержит логику инициализации значения реакт контекста
2️⃣ Отсутствие атомарных обновлений — компоненты или хуки, которые используют контекст, перерендеривается каждый раз, когда контекст изменяет состояние. Даже если ваш компонент использует лишь одной свойство из контекста, которое никогда не изменяется — компонент будет перерендериваться при изменении любого другого свойства в контексте.
✅ Как решить проблему?
- Не класть всё в один большой контекст, а разбить его на несколько маленьких
- Использовать библиотеку для управления состоянием, например, zustand
- Минимизировать использование контекста. Например, можно использовать контекст в родительском компоненте, а дочерним передать нужные значения через пропсы.
Проблемы и решения описаны в статье The Problem with React's Context API (тут перевод на русский).
