Czym jest useContext w React?

useContext to hook w React, który pozwala komponentom funkcyjnym subskrybować zmiany w kontekście. Zapewnia sposób przekazywania danych przez drzewo komponentów bez konieczności jawnego przekazywania props na każdym poziomie.

Zasada działania:

1. Tworzenie kontekstu: Używa się React.createContext() do utworzenia obiektu kontekstu. Obiekt ten zawiera Provider i Consumer (lub używa się useContext w komponentach funkcyjnych).
2. Udostępnianie wartości: Komponent Provider kontekstu otacza drzewo komponentów, które potrzebują dostępu do wartości. Przez prop value przekazuje się wartość, która będzie dostępna dla wszystkich subskrybowanych komponentów.
3. Odbieranie wartości: useContext(MyContext) jest wywoływane wewnątrz komponentu funkcyjnego, gdzie MyContext to wcześniej utworzony kontekst. Hook zwraca aktualną wartość kontekstu. Gdy wartość kontekstu się zmienia, komponent korzystający z useContext jest automatycznie ponownie renderowany.

Zalety:

• Łatwość przekazywania danych: Eliminuje konieczność "prop drilling" przez wiele komponentów pośrednich.
• Stan globalny: Przydatny do zarządzania globalnym stanem aplikacji (np. motyw, uwierzytelnianie, lokalizacja).
• Wydajność: React optymalizuje renderowanie komponentów korzystających z useContext, odświeżając tylko te, które są subskrybowane na zmiany tego kontekstu.

Wady:

• Trudność w debugowaniu: Może być trudniej śledzić, skąd pochodzi wartość kontekstu w porównaniu do propsów.
• Wydajność przy częstych aktualizacjach: Jeśli wartość kontekstu jest aktualizowana bardzo często, może to prowadzić do częstych ponownych renderów wszystkich subskrybowanych komponentów.

Przykład:

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

// 1. Tworzenie kontekstu
const ThemeContext = createContext('light');

// Komponent dostawca
function ThemeProvider({ children }) {
  const theme = 'dark'; // Przykładowa wartość
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Komponent korzystający z kontekstu
function ThemedComponent() {
  // 3. Odbieranie wartości kontekstu
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Motyw: {theme}</div>;
}

// Aplikacja
function App() {
  return (
    <ThemeProvider> {/* 2. Udostępnianie wartości */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;