Comment configurer React Context

Le prop drilling ruine votre code. Vous transmettez des données à travers cinq couches de composants qui n'en ont pas besoin. React Context résout ce problème. Cependant, la plupart des configurations en créent un nouveau.

Lorsque vous utilisez « Go to Definition » sur un hook de contexte, vous arrivez souvent dans un fichier qui ne contient rien d'autre qu'un minuscule appel à useContext. La logique réelle se trouve dans un autre fichier. Vous passez votre journée à chercher la logique d'état.

Vous pouvez corriger cela avec une meilleure structure.

Suivez ce modèle :

  • Mettez le contexte, le hook public et la logique d'état dans un seul fichier.
  • Gardez le Provider comme une simple enveloppe (thin shell).
  • Utilisez une règle de lint pour protéger votre logique privée.

Structurez vos fichiers de cette manière :

src/context/ • GameContext.ts (Contexte, hook public et logique d'état) • GameProvider.tsx (Une simple enveloppe)

À l'intérieur de GameContext.ts, créez trois parties :

  1. L'objet contexte.
  2. Un hook public pour les composants. Ce hook doit lever une erreur si le contexte est nul. Cela garantit que vos composants échouent rapidement s'ils se trouvent en dehors du provider.
  3. Un hook privé pour la gestion de l'état. Ce hook contient vos appels useState ou useReducer.

En plaçant le hook public et la logique privée dans le même fichier, « Go to Definition » fonctionne parfaitement. Vous passez directement du composant à la logique.

Un risque subsiste. Comme le hook privé est exporté pour que le Provider puisse l'utiliser, un collègue pourrait l'appeler au mauvais endroit. Si c'est le cas, il créera un nouvel état isolé au lieu d'utiliser le contexte partagé.

Arrêtez d'utiliser des commentaires pour empêcher cela. Utilisez plutôt une règle ESLint.

J'ai créé eslint-plugin-restrict-callers pour résoudre ce problème. Vous pouvez définir quelles fonctions sont autorisées à appeler des hooks spécifiques.

Par exemple, vous pouvez indiquer à ESLint que seul GameProvider peut appeler useGameStateManagement. Si quelqu'un d'autre essaie, le build échoue avec un message d'erreur clair.

Résumé du flux de travail :

  • Regroupez le contexte, les hooks publics et la logique privée dans un seul fichier.
  • Utilisez le Provider uniquement pour passer le résultat du hook à la valeur du provider.
  • Levez des erreurs dans le hook public si le contexte est manquant.
  • Utilisez ESLint pour imposer des limites entre les hooks publics et privés.

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