Как настроить React Context

Прокидывание пропсов (prop drilling) портит ваш код. Вы передаете данные через пять слоев компонентов, которым они не нужны. React Context решает эту проблему. Однако большинство подходов создают новую проблему.

Когда вы используете «Go to Definition» для хука контекста, вы часто попадаете в файл, где нет ничего, кроме крошечного вызова useContext. Сама логика находится в другом файле. Вы тратите весь день на поиск логики состояния.

Это можно исправить с помощью более удачной структуры.

Следуйте этому паттерну:

  • Поместите контекст, публичный хук и логику состояния в один файл.
  • Сделайте Provider «тонкой оболочкой».
  • Используйте правило линтера для защиты вашей приватной логики.

Структурируйте файлы следующим образом:

src/context/ • GameContext.ts (Контекст, публичный хук и логика состояния) • GameProvider.tsx (Тонкая оболочка)

Внутри GameContext.ts создайте три части:

  1. Объект контекста.
  2. Публичный хук для использования в компонентах. Этот хук должен выбрасывать ошибку, если контекст равен null. Это гарантирует, что компоненты быстро обнаружат ошибку, если они находятся вне провайдера.
  3. Приватный хук для управления состоянием. Этот хук содержит ваши вызовы useState или useReducer.

Благодаря тому, что публичный хук и приватная логика находятся в одном файле, «Go to Definition» работает идеально. Вы переходите напрямую от компонента к логике.

Существует один риск. Поскольку приватный хук экспортируется, чтобы Provider мог его использовать, коллега может вызвать его в неположенном месте. В этом случае он создаст новое изолированное состояние вместо использования общего контекста.

Перестаньте использовать комментарии, чтобы предотвратить это. Вместо этого используйте правило ESLint.

Я создал eslint-plugin-restrict-callers, чтобы решить эту проблему. Вы можете определить, каким функциям разрешено вызывать определенные хуки.

Например, вы можете указать ESLint, что только GameProvider может вызывать useGameStateManagement. Если кто-то другой попытается это сделать, сборка завершится с четким сообщением об ошибке.

Итог рабочего процесса:

  • Группируйте контекст, публичные хуки и приватную логику в одном файле.
  • Используйте Provider только для передачи результата хука в значение провайдера (value).
  • Выбрасывайте ошибки в публичном хуке, если контекст отсутствует.
  • Используйте ESLint для соблюдения границ между публичными и приватными хуками.

Source: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h