04. Context API

O czym jest ta prezentacja?

Context API

Context API to mechanizm React do współdzielenia danych między komponentami bez przekazywania props przez każdy poziom drzewa (prop drilling). Klasyczne zastosowania: motyw (dark/light), język, dane zalogowanego użytkownika.

Kluczowe pytania do odpowiedzi

Co to jest prop drilling? — Problem przekazywania props przez komponenty, które ich nie potrzebują
Jak działa Context? — Provider owija drzewo, Consumer lub useContext odczytuje wartość
Kiedy używać Context? — Dane globalne: auth, theme, locale; NIE do wszystkiego
Wady Context? — Każda zmiana wartości re-renderuje wszystkich konsumentów

Zakres merytoryczny

Problem prop drilling — przykład 3-poziomowego przekazywania props
createContext + Provider — tworzenie kontekstu, owijanie drzewa
useContext hook — odczytywanie wartości w komponencie
Wzorzec ThemeContext — przełączanie dark/light mode
Kiedy NIE używać — wydajność, alternatywy (Zustand, Redux)

Wymagane elementy wizualne

Schemat

Drzewo komponentów: lewe drzewo z “czerwonymi strzałkami” prop drilling przez 4 poziomy. Prawe drzewo z Context Provider owijającym wszystko i jedną strzałką do konsumenta.

Przykład kodu JSX

ThemeContext — przełącznik dark/light mode dostępny w każdym komponencie bez props.

Warianty realizacji

Definicja prop drilling z wizualnym przykładem
createContext, Provider, useContext
Prosty przykład: ThemeContext dark/light

Forma: 10 slajdów, 10 minut

Ocena: 3.0

Scenariusze i przykłady

Przykład 1 — ThemeContext

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

// 1. Utwórz kontekst
const ThemeContext = createContext('light');

// 2. Provider owija aplikację
function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Header />
      <Main />
    </ThemeContext.Provider>
  );
}

// 3. Dowolny komponent w drzewie może odczytać
function ThemeToggle() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
      Motyw: {theme}
    </button>
  );
}

Przykład 2 — Prop drilling (problem)

// ŹLE: theme wędruje przez każdy poziom
function App() {
  const [theme] = useState('dark');
  return <Header theme={theme} />;
}
function Header({ theme }) {
  return <Nav theme={theme} />;  // Header nie używa theme, tylko przekazuje dalej!
}
function Nav({ theme }) {
  return <Button theme={theme} />;  // Nav też nie używa!
}
function Button({ theme }) {
  return <button className={theme}>Klik</button>;  // Dopiero tu jest potrzebne
}

Wskazówki do wystąpienia

Wizualizacja prop drilling

Narysujcie drzewo z “kanałem telefonicznym” przez każdy poziom — słuchawka tylko na początku i końcu, ale kabel przez każde piętro. Context to “WiFi” — sygnał wszędzie bez kabli.

Ostrzeżenie o wydajności

Podkreślcie: Context to NIE Redux. Każda zmiana wartości Providera = re-render wszystkich konsumentów. Nie wrzucajcie wszystkiego do jednego kontekstu!

Zasoby

React — useContext Oficjalna dokumentacja useContext.

React — Passing Data Deeply Przewodnik po Context API.

Do dzieła!

Context = globalny stan bez bólu!

Context API to jedno z najczęściej używanych narzędzi w projektach React. Po tej prezentacji klasa będzie wiedzieć jak uniknąć prop drillingu we własnym projekcie!