Jak skonfigurować React Context

Prop drilling niszczy Twój kod. Przekazujesz dane przez pięć warstw komponentów, które wcale ich nie potrzebują. React Context rozwiązuje ten problem. Jednak większość konfiguracji tworzy nowy problem.

Kiedy używasz „Go to Definition” na hooku kontekstu, często trafiasz do pliku, w którym znajduje się jedynie małe wywołanie useContext. Faktyczna logika znajduje się w innym pliku. Cały dzień spędzasz na szukaniu logiki stanu.

Możesz to naprawić, stosując lepszą strukturę.

Postępuj zgodnie z tym wzorcem:

  • Umieść kontekst, publiczny hook oraz logikę stanu w jednym pliku.
  • Zachowaj Provider jako cienki wrapper (thin shell).
  • Użyj reguły lintera, aby chronić swoją prywatną logikę.

Zorganizuj swoje pliki w następujący sposób:

src/context/ • GameContext.ts (Kontekst, publiczny hook i logika stanu) • GameProvider.tsx (Cienki wrapper)

Wewnątrz GameContext.ts utwórz trzy części:

  1. Obiekt kontekstu.
  2. Publiczny hook do użytku w komponentach. Hook ten powinien rzucać błąd, jeśli kontekst jest nullem (null). Dzięki temu Twoje komponenty szybko wykażą błąd (fail fast), jeśli znajdą się poza dostawcą (providerem).
  3. Prywatny hook do zarządzania stanem. Hook ten zawiera wywołania useState lub useReducer.

Dzięki umieszczeniu publicznego hooka i prywatnej logiki w tym samym pliku, „Go to Definition” działa idealnie. Przeskakujesz bezpośrednio z komponentu do logiki.

Istnieje jedno ryzyko. Ponieważ prywatny hook jest eksportowany, aby Provider mógł go używać, członek zespołu może wywołać go w niewłaściwym miejscu. Jeśli to zrobi, utworzy nowy, odizolowany stan zamiast korzystać ze współdzielonego kontekstu.

Przestań używać komentarzy, aby temu zapobiec. Zamiast tego użyj reguły ESLint.

Stworzyłem eslint-plugin-restrict-callers, aby rozwiązać ten problem. Możesz zdefiniować, które funkcje mają prawo wywoływać konkretne hooki.

Na przykład możesz powiedzieć ESLint, że tylko GameProvider może wywoływać useGameStateManagement. Jeśli ktoś inny spróbuje to zrobić, proces budowania zakończy się błędem z jasnym komunikatem.

Podsumowanie przepływu pracy:

  • Grupuj kontekst, publiczne hooki i prywatną logikę w jednym pliku.
  • Używaj Providera tylko do przekazania wyniku hooka do wartości providera (provider value).
  • Rzucaj błędy w publicznym hooku, jeśli kontekst jest nieobecny.
  • Używaj ESLint, aby wymuszać granice między publicznymi a prywatnymi hookami.

Źródło: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h