React Hooks und Context haben die Herangehensweise an das State-Management und die Datenweitergabe in React-Anwendungen grundlegend verändert. Mit der Einführung der Hooks in Version 16.8 im Jahr 2019 erhielten Entwickler die Möglichkeit, Zustand und Lebenszyklusmethoden innerhalb von Funktionskomponenten zu verwenden, was zu einem prägnanteren und besser lesbaren Code führt.

Context hingegen bietet eine effiziente Methode, Daten zwischen Komponenten zu teilen, ohne Props explizit weiterreichen zu müssen. In diesem Kapitel wird die leistungsstarke Synergie zwischen React Hooks und Context untersucht und deren gemeinsames Potenzial zur Vereinfachung komplexer Zustandsverwaltung sowie zur Förderung eines nahtlosen Datenflusses durch den gesamten Komponentenbaum aufgezeigt.

In den nächsten Kapiteln werden wir folgende Themen im Detail betrachten:

State-Hook

useState ermöglicht es einer Komponente, Informationen zu speichern und wieder abzurufen (z. B. Benutzereingaben). Beispielsweise kann eine Formular-Komponente den State nutzen, um den Eingabewert zu speichern, während eine Bildergalerie-Komponente den State verwenden kann, um den Index des ausgewählten Bildes zu verfolgen.

function Form() {
  const [value, setValue] = useState('');
  // ...
}

Ref-Hook

useRef bietet einer Komponente die Möglichkeit, nicht-rendernde Informationen zu speichern, wie beispielsweise ein DOM-Element oder eine Timeout-ID. Im Gegensatz zum State löst das Ändern eines Refs kein erneutes Rendern der Komponente aus. Refs dienen als "Notausgang" aus dem typischen React-Paradigma und sind nützlich bei der Interaktion mit nicht-React-Systemen, wie den nativen Browser-APIs.

function Form() {
  const inputRef = useRef(null);
  // ...
}

Effekt-Hook

useEffect ermöglicht es einer Komponente, Verbindungen zu externen Systemen herzustellen und sich mit diesen zu synchronisieren, einschließlich der Interaktion mit Netzwerken, der Manipulation des Browser-DOMs, der Steuerung von Animationen, der Integration von Widgets, die mit verschiedenen UI-Bibliotheken entwickelt wurden, sowie der nahtlosen Einbindung von Nicht-React-Code.

function Animation({ animationId }) {
  useEffect(() => {
    const animation = createAnimation(animationId);
    animation.start();
    
    // Cleaning up the animation when the component unmounts
    return () => animation.stop();
  }, [animationId]);
  // ...
}

Memo-Hook

useMemo verbessert die Renderleistung, indem unnötige Berechnungen minimiert werden. Beispielsweise kann React angewiesen werden, eine zwischengespeicherte Berechnung wiederzuverwenden oder ein erneutes Rendern zu vermeiden, wenn sich die Daten seit dem letzten Rendern nicht geändert haben.

function NewspaperList({ data, filter }) {
  const filteredData = useMemo(
    () => performFiltering(data, filter),
    [data, filter]
  );
  // ...
}

Kontext-Hook

useContext ermöglicht es einer Komponente, Informationen von entfernten Elternkomponenten zu beziehen, ohne Props weitergeben zu müssen. Dadurch kann die oberste Komponente der Anwendung das aktuelle UI-Theme nahtlos an alle Nachkommen weitergeben, unabhängig von deren Tiefe im Komponentenbaum.

function Section() {
  const theme = useContext(ThemeContext);
  // ...
}