So richten Sie React Context ein

Prop Drilling ruiniert Ihren Code. Sie übergeben Daten durch fünf Ebenen von Komponenten, die sie gar nicht benötigen. React Context löst dieses Problem. Die meisten Setups schaffen jedoch ein neues Problem.

Wenn Sie „Go to Definition“ bei einem Context-Hook verwenden, landen Sie oft in einer Datei, die nichts als einen winzigen useContext-Aufruf enthält. Die eigentliche Logik befindet sich in einer anderen Datei. Sie verbringen Ihren Tag damit, nach der State-Logik zu suchen.

Sie können dies durch eine bessere Struktur beheben.

Folgen Sie diesem Muster:

  • Packen Sie den Context, den öffentlichen Hook und die State-Logik in eine einzige Datei.
  • Halten Sie den Provider als eine dünne Hülle („thin shell“).
  • Verwenden Sie eine Lint-Regel, um Ihre private Logik zu schützen.

Strukturieren Sie Ihre Dateien wie folgt:

src/context/ • GameContext.ts (Context, öffentlicher Hook und State-Logik) • GameProvider.tsx (Eine dünne Hülle)

Erstellen Sie in GameContext.ts drei Teile:

  1. Das Context-Objekt.
  2. Ein öffentlicher Hook für die Verwendung in Komponenten. Dieser Hook sollte einen Fehler auslösen, wenn der Context null ist. Dies stellt sicher, dass Ihre Komponenten sofort fehlschlagen („fail fast“), falls sie außerhalb des Providers aufgerufen werden.
  3. Ein privater Hook für das State-Management. Dieser Hook enthält Ihre useState- oder useReducer-Aufrufe.

Indem Sie den öffentlichen Hook und die private Logik in dieselbe Datei legen, funktioniert „Go to Definition“ perfekt. Sie springen direkt von der Komponente zur Logik.

Es besteht jedoch ein Risiko. Da der private Hook exportiert wird, damit der Provider ihn nutzen kann, könnte ein Teammitglied ihn an der falschen Stelle aufrufen. Wenn dies geschieht, wird ein neuer, isolierter State erstellt, anstatt den gemeinsamen Context zu nutzen.

Hören Sie auf, Kommentare zu verwenden, um dies zu verhindern. Nutzen Sie stattdessen eine ESLint-Regel.

Ich habe eslint-plugin-restrict-callers entwickelt, um dieses Problem zu lösen. Sie können definieren, welche Funktionen berechtigt sind, bestimmte Hooks aufzurufen.

Sie können ESLint beispielsweise mitteilen, dass nur der GameProvider useGameStateManagement aufrufen darf. Wenn jemand anderes versucht, dies zu tun, schlägt der Build mit einer klaren Fehlermeldung fehl.

Zusammenfassung des Workflows:

  • Gruppieren Sie Context, öffentliche Hooks und private Logik in einer Datei.
  • Nutzen Sie den Provider nur, um das Ergebnis des Hooks an den Provider-Value zu übergeben.
  • Werfen Sie Fehler im öffentlichen Hook, falls der Context fehlt.
  • Nutzen Sie ESLint, um Grenzen zwischen öffentlichen und privaten Hooks durchzusetzen.

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