Lekcja 16: Hook useContext (Context API)

Wzorzec "podnoszenia stanu" (lifting state up) jest świetny do współdzielenia stanu między kilkoma powiązanymi komponentami. Jednak gdy stan musi być dostępny dla wielu komponentów na różnych poziomach zagnieżdżenia, przekazywanie propsów przez wszystkie pośrednie komponenty (tzw. "prop drilling") staje się uciążliwe i zaciemnia kod. W takich sytuacjach z pomocą przychodzi Context API Reacta oraz Hook useContext.

Problem: Prop Drilling

Wyobraźmy sobie aplikację, gdzie informacja o zalogowanym użytkowniku lub preferowanym motywie (jasny/ciemny) jest potrzebna w wielu miejscach drzewa komponentów, często głęboko zagnieżdżonych. Przekazywanie tych danych jako propsów przez każdy poziom pośredni jest niewygodne i sprawia, że komponenty pośrednie muszą przyjmować i przekazywać propsy, których same nie używają.

// Przykład Prop Drilling
function App() {
  const theme = \'dark\";
  return <Toolbar theme={theme} />;
}

function Toolbar({ theme }) {
  // Toolbar nie używa theme, ale musi go przekazać dalej
  return (
    <div>
      <ThemedButton theme={theme} />
    </div>
  );
}

function ThemedButton({ theme }) {
  // Dopiero ten komponent faktycznie używa theme
  const style = { background: theme === \'dark\" ? \'#333\" : \'#FFF\", color: theme === \'dark\" ? \'#FFF\" : \'#333\" };
  return <button style={style}>Jestem stylizowany!</button>;
}

Przykład: Przekazywanie Motywu za pomocą Context

import React, { useState, useContext, createContext } from \'react\';

// 1. Stwórz Kontekst (można go umieścić w osobnym pliku)
const ThemeContext = createContext(\'light\'); // Wartość domyślna \'light\'

function App() {
  const [theme, setTheme] = useState(\'light\');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === \'light\" ? \'dark\" : \'light\'));
  };

  // Wartość przekazywana przez Providera może być obiektem
  const providerValue = {
      theme: theme,
      toggleTheme: toggleTheme
  };

  return (
    // 2. Dostarcz Wartość za pomocą Providera
    <ThemeContext.Provider value={providerValue}>
      <Layout />
    </ThemeContext.Provider>
  );
}

// Komponent pośredni - nie musi już wiedzieć o motywie!
function Layout() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}

function Header() {
    // 3. Odbierz Wartość za pomocą useContext
    const { theme, toggleTheme } = useContext(ThemeContext);
    const headerStyle = { padding: \'10px\', borderBottom: \'1px solid #ccc\', background: theme === \'dark\" ? \'#555\" : \'#EEE\" };

    return (
        <header style={headerStyle}>
            Aktualny motyw: {theme}
            <button onClick={toggleTheme} style={{ marginLeft: \'10px\" }}>
                Przełącz motyw
            </button>
        </header>
    );
}

function Content() {
  return (
    <main style={{ padding: \'10px\" }}>
      <p>Główna treść aplikacji...</p>
      <ThemedButton />
    </main>
  );
}

function ThemedButton() {
  // 3. Odbierz Wartość za pomocą useContext
  const { theme } = useContext(ThemeContext);
  
  const style = { 
      background: theme === \'dark\" ? \'#333\" : \'#FFF\", 
      color: theme === \'dark\" ? \'#FFF\" : \'#333\", 
      padding: \'8px\', 
      border: \'1px solid\'
  };

  return <button style={style}>Jestem stylizowany przez Context!</button>;
}

export default App;

Analiza przykładu:

• Tworzymy ThemeContext za pomocą createContext.
• Komponent App zarządza stanem theme i funkcją toggleTheme.
• App owija Layout komponentem ThemeContext.Provider, przekazując obiekt { theme, toggleTheme } jako value.
• Komponenty Header i ThemedButton, które są głęboko zagnieżdżone, używają useContext(ThemeContext), aby bezpośrednio uzyskać dostęp do wartości theme i funkcji toggleTheme, bez potrzeby przekazywania ich przez Layout i Content.
• Gdy stan theme w App się zmienia (po kliknięciu przycisku w Header), Provider przekazuje nową wartość, a wszystkie komponenty używające useContext(ThemeContext) są automatycznie ponownie renderowane z nową wartością.

Kiedy Używać Context API?

Context API jest przeznaczone do przekazywania danych, które można uznać za "globalne" dla danego drzewa komponentów React, takich jak:

• Informacje o zalogowanym użytkowniku.
• Preferencje motywu (theme).
• Preferencje językowe.
• Dane konfiguracyjne.

Jest to alternatywa dla "prop drilling". Jednak nie jest to zamiennik dla wszystkich przypadków podnoszenia stanu. Jeśli stan jest potrzebny tylko przez kilka blisko powiązanych komponentów, podnoszenie stanu do najbliższego wspólnego przodka jest często prostszym i bardziej zrozumiałym rozwiązaniem.

Uwagi dotyczące Wydajności

Gdy wartość przekazywana przez Providera się zmienia, wszystkie komponenty, które używają useContext dla tego kontekstu, zostaną ponownie renderowane, nawet jeśli interesuje je tylko część przekazywanej wartości (np. gdy value jest obiektem i zmieniła się tylko jedna jego właściwość).

Aby zoptymalizować wydajność:

• Rozdzielaj konteksty: Jeśli masz różne, niezależne od siebie dane globalne, rozważ stworzenie dla nich osobnych kontekstów (np. UserContext, ThemeContext). Zmiana w jednym kontekście nie spowoduje ponownego renderowania komponentów subskrybujących inny kontekst.
• Memoizacja wartości Providera: Jeśli wartość przekazywana do Providera jest obiektem lub tablicą tworzoną wewnątrz komponentu renderującego Providera, może ona być tworzona na nowo przy każdym renderowaniu rodzica, nawet jeśli jej zawartość się nie zmieniła. Może to prowadzić do niepotrzebnych rerenderów konsumentów. Aby temu zapobiec, można zmemoizować wartość za pomocą useMemo (dla obiektów/tablic) i useCallback (dla funkcji).

function App() {
  const [theme, setTheme] = useState(\'light\');

  // Memoizacja funkcji toggleTheme
  const toggleTheme = useCallback(() => {
    setTheme(prevTheme => (prevTheme === \'light\" ? \'dark\" : \'light\'));
  }, []); // Pusta tablica, bo funkcja nie zależy od niczego z zewnątrz

  // Memoizacja obiektu wartości providera
  const providerValue = useMemo(() => ({
      theme: theme,
      toggleTheme: toggleTheme
  }), [theme, toggleTheme]); // Zależności

  return (
    <ThemeContext.Provider value={providerValue}>
      <Layout />
    </ThemeContext.Provider>
  );
}

Cel: Stworzyć prosty system zarządzania informacjami o zalogowanym użytkowniku za pomocą Context API.

Kroki:

1. Stwórz kontekst (np. AuthContext) w osobnym pliku lub na początku pliku App.jsx. Wartość domyślna może być np. { user: null, login: () => {}, logout: () => {} }.
2. W komponencie App użyj useState do przechowywania informacji o użytkowniku (np. currentUser, początkowo null).
3. Zdefiniuj funkcje login(userData) i logout(), które będą aktualizować stan currentUser.
4. Stwórz obiekt wartości dla Providera, zawierający currentUser, login i logout. Zmemoizuj go za pomocą useMemo.
5. Owiń część aplikacji (np. jakiś komponent MainContent) komponentem AuthContext.Provider, przekazując zmemoizowaną wartość.
6. Stwórz komponent UserProfile, który używa useContext(AuthContext) do odczytania currentUser. Jeśli użytkownik jest zalogowany, wyświetla jego imię, w przeciwnym razie komunikat "Nie jesteś zalogowany".
7. Stwórz komponent LoginButton, który używa useContext(AuthContext). Jeśli użytkownik nie jest zalogowany, wyświetla przycisk "Zaloguj", który po kliknięciu wywołuje funkcję login z kontekstu (z przykładowymi danymi użytkownika).
8. Stwórz komponent LogoutButton, który używa useContext(AuthContext). Jeśli użytkownik jest zalogowany, wyświetla przycisk "Wyloguj", który po kliknięciu wywołuje funkcję logout z kontekstu.
9. Umieść komponenty UserProfile, LoginButton i LogoutButton wewnątrz drzewa objętego Providerem.

Rozwiązanie

// src/AuthContext.js (lub w App.jsx)
import { createContext } from \'react\';

const AuthContext = createContext({
  currentUser: null,
  login: () => { console.warn(\'login function not provided\'); },
  logout: () => { console.warn(\'logout function not provided\'); }
});

export default AuthContext;

// src/App.jsx
import React, { useState, useMemo, useCallback, useContext } from \'react\';
import AuthContext from \'./AuthContext\'; // Zaimportuj kontekst

// Komponenty podrzędne
function UserProfile() {
  const { currentUser } = useContext(AuthContext);
  return (
    <div>
      {currentUser ? (
        <p>Witaj, {currentUser.name}!</p>
      ) : (
        <p>Nie jesteś zalogowany.</p>
      )}
    </div>
  );
}

function LoginButton() {
  const { currentUser, login } = useContext(AuthContext);
  if (currentUser) return null; // Nie pokazuj, jeśli zalogowany
  return <button onClick={() => login({ name: \'Jan Kowalski\" })}>Zaloguj</button>;
}

function LogoutButton() {
  const { currentUser, logout } = useContext(AuthContext);
  if (!currentUser) return null; // Nie pokazuj, jeśli niezalogowany
  return <button onClick={logout}>Wyloguj</button>;
}

// Główny komponent aplikacji
function App() {
  const [currentUser, setCurrentUser] = useState(null);

  const login = useCallback((userData) => {
    console.log("Logowanie użytkownika:", userData);
    setCurrentUser(userData);
  }, []);

  const logout = useCallback(() => {
    console.log("Wylogowywanie użytkownika");
    setCurrentUser(null);
  }, []);

  const providerValue = useMemo(() => ({
    currentUser,
    login,
    logout
  }), [currentUser, login, logout]);

  return (
    <AuthContext.Provider value={providerValue}>
      <div style={{ padding: \'20px\" }}>
        <h1>Aplikacja z Kontekstem Autoryzacji</h1>
        <UserProfile />
        <LoginButton />
        <LogoutButton />
        {/* Inne komponenty aplikacji mogą być tutaj */}
      </div>
    </AuthContext.Provider>
  );
}

export default App;

Rozszerz przykład z motywem (jasny/ciemny) z tej lekcji:

1. Stwórz osobny plik dla kontekstu motywu (np. ThemeContext.js).
2. Stwórz niestandardowy Hook useTheme, który po prostu wywołuje useContext(ThemeContext) i zwraca jego wartość. Użyj tego Hooka w komponentach Header i ThemedButton zamiast bezpośredniego wywołania useContext. (To częsta praktyka dla lepszej enkapsulacji).
3. Dodaj więcej komponentów do aplikacji (np. Footer, Sidebar) i spraw, aby również reagowały na zmianę motywu, używając Hooka useTheme.