​​⚠️ Проблемы 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 (тут перевод на русский).