Was ist useContext in React?

useContext ist ein Hook in React, der es funktionalen Komponenten ermöglicht, auf Änderungen im Kontext zu abonnieren. Es bietet eine Möglichkeit, Daten durch die Komponentenbaumstruktur zu übermitteln, ohne Props explizit auf jeder Ebene weiterzugeben.

Funktionsweise:

1. Erstellen des Kontexts: Mit React.createContext() wird ein Kontextobjekt erstellt. Dieses Objekt enthält einen Provider und einen Consumer (oder useContext in funktionalen Komponenten).
2. Bereitstellen des Werts: Der Provider des Kontexts umschließt den Komponentenbaum, der Zugriff auf den Wert haben soll. Der Wert wird über die Prop value übergeben und ist für alle abonnierten Komponenten zugänglich.
3. Wert abrufen: useContext(MyContext) wird innerhalb einer funktionalen Komponente aufgerufen, wobei MyContext der zuvor erstellte Kontext ist. Der Hook gibt den aktuellen Wert des Kontexts zurück. Wenn sich dieser Wert ändert, wird die Komponente, die useContext verwendet, automatisch neu gerendert.

Vorteile:

• Einfache Datenweitergabe: Vermeidet "prop drilling" durch mehrere Zwischenkomponenten.
• Globaler Zustand: Nützlich zur Verwaltung des globalen Zustands der Anwendung (z.B. Thema, Authentifizierung, Lokalisierung).
• Leistung: React optimiert das Rendern von Komponenten, die useContext verwenden, indem nur die Komponenten neu gerendert werden, die auf Änderungen dieses Kontexts reagieren.

Nachteile:

• Debugging-Komplexität: Es kann schwieriger sein, nachzuvollziehen, woher der Wert des Kontexts stammt, im Vergleich zu Props.
• Leistung bei häufigen Aktualisierungen: Wenn der Kontextwert sehr häufig aktualisiert wird, kann dies zu häufigen Neurenderings aller abonnierten Komponenten führen.

Beispiel:

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

// 1. Erstellen des Kontexts
const ThemeContext = createContext('light');

// Provider-Komponente
function ThemeProvider({ children }) {
  const theme = 'dark'; // Beispielwert
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Komponente, die den Kontext nutzt
function ThemedComponent() {
  // 3. Wert des Kontexts abrufen
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Thema: {theme}</div>;
}

// Anwendung
function App() {
  return (
    <ThemeProvider> {/* 2. Wert bereitstellen */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;