Context Api w React.js

React Context służy do tworzenia wartości globalnych, czyli takich, które będą dzielone pomiędzy wieloma komponentami. Domyślnie do przekazywania wartości pomiędzy komponentami służą propsy, czyli wartości które przekazujemy z jednego komponentu do drugiego. Czasami jednak potrzebujemy dostać się do jakiejś wartości w komponencie, który umieszczony jest głęboko w drzewie komponentów i przekazywanie wartości jeden po drugim aż do ostatniego komponentu byłoby uciążliwe, mało czytelne i niepoprawne. Rozwiązaniem tego problemu jest React Context, który pozwala korzystać z wartości globalnej w dowolnym komponencie.

Przykładem zastosowania globalnych wartości są ustawienia użytkownika takie jak język strony. Tworzymy nowy context korzystając z funkcji createContext importując ją uprzednio z modułu react. Do definiowania kontekstu używamy PascalCase, a więc nazwa zaczyna się z dużej litery.

// language-context.ts
import { createContext } from 'react';

// Jako argument funkcja "createContext"
// przyjmuje wartość domyślną kontekstu.
export const LanguageContext = createContext<Language>('pl');

// Tworzymy dla języka typ union, który przjmuje
// jedną z dwóch wartości string: 'pl' lub 'en'.
type Language = 'pl' | 'en';

Jako wartość domyślną w tym przypadku podaliśmy pl, a więc domyślnym językiem będzie język polski. W oparciu o stworzony kontekst, stwórzmy teraz dwa komponenty które będą go wykorzystywały.

// App.tsx
import React, { useContext } from 'react';
import { LanguageContext } from './language-context';

const App = () => {
  return (
    // Renderowanie komponentu Provider,
    // który jest dostępny w obiekcie kontekstu.
    <LanguageContext.Provider value={'en'}>
      <DisplayLanguage />
    </LanguageContext.Provider>
  );
}

const DisplayLanguage = () => {
  // Odczytywanie utworzonego kontekstu.
  const language = useContext(LanguageContext);

  return (
    <span>
      Twój język to "{language}".
    </span>
  );
}

W komponencie nadrzędnym (poziom zagnieżdżenia nie ma znaczenia, nie musi być bezpośrednim rodzicem) renderujemy komponent, który jest właściwością kontekstu (<LanguageContext.Provider />). Komponent ten jest providerem - dostarcza wartość, którą odczytają komponenty dzieci korzystające z kontekstu. Jeśli nie wyrenderujemy komponentu provider, to podczas odczytywania kontekstu zostanie podana wartość domyślna, którą podaliśmy podczas jego tworzenia.

Jeśli wszystko wykonaliśmy poprawnie, rezultatem powinnien być tekst Twój język to “en”. Usuńmy teraz komponent provider dostarczający wartość “en” z komponentu App.

const App = () => {
  return <DisplayLanguage />;
}

Rezultatem powinien być tekst Twój język to “pl”., a więc nie istnieje żaden provider dostarczający wartość i została ona odczytana z wartości domyślnej.