Як налаштувати 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 лише для передачі результату хука в значення провайдера.
  • Викидайте помилки в публічному хуку, якщо контекст відсутній.
  • Використовуйте ESLint для встановлення меж між публічними та приватними хуками.

Джерело: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h