# Verwendung von Hooks Insgesamt bringt React aktuell **10** eigene Hooks mit, von denen die offizielle Dokumentation **3** als **Basic**, also als *grundlegende*, die restlichen **7** als **Additional**, also als *zusätzliche* Hooks betitelt. Und in der Tat ist diese Unterteilung sinnvoll, denn in den meisten Fällen, in denen mit Hooks gearbeitet wird, wird man die 3 Basic Hooks `useState()`, `useEffect()` und `useContext()` verwenden. Die als **Additional Hooks** bezeichneten Ausprägungen sind insbesondere für spätere Optimierungen oder zum Abdecken von Edge-Cases vorgesehen. In diesem Kapitel soll es daher erst einmal um die „simplen“ Hooks gehen und ich möchte demonstrieren, wie man Funktionalität mit **Function Components** realisieren kann, für die bisher **Klassen-Komponenten** notwendig waren. ### State mit useState() Werfen wir zunächst einen Blick darauf, wie wir bisher auf State in Komponenten zugegriffen haben und wie wir ihn modifiziert haben. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; class Counter extends React.Component { state = { value: 0, }; render() { return (

Zählerwert: {this.state.value}

); } } ReactDOM.render(, document.getElementById('root')); ``` Hier implementieren wir beispielhaft einen Zähler, der mitzählt, wie oft wir den **+1**-Button gedrückt haben. Zugegeben, nicht gerade kreativ, demonstriert aber sehr gut, wie uns Hooks das Leben an dieser Stelle einfacher machen. Wir zeigen den aktuellen Wert an, indem wir `this.state.value` auslesen und haben darunter einen Button, mit dem wir den Wert erhöhen können. Dazu rufen wir `this.setState()` auf und setzen den neuen `value` auf den vorherigen Wert, den wir um 1 erhöhen. Schauen wir uns die identische Funktionalität noch einmal an, diesmal in einer **Function Component** mit dem neuen `useState()`-Hook: ```jsx import React from 'react'; import ReactDOM from 'react-dom'; const Counter = () => { const [ value, setValue ] = React.useState(0); return (

Zählerwert: {value}

); } ReactDOM.render(, document.getElementById('root')); ``` Hier haben wir kein `state`-Objekt mehr und auch kein `this`, über das wir auf den State zugreifen. Stattdessen sehen wir hier den Aufruf des internen `useState()`-Hooks. Dieser funktioniert so, dass er einen **Initialwert** übergeben bekommt (hier: `0`) und einen Tupel zurückgibt, also ein Array mit der gleichen Anzahl von Werten. Im Falle des `useState()`-Hooks sind das zum einen der aktuelle State, zum anderen eine Setter-Funktion, mit der wir den Wert modifizieren können. Um direkt auf den Wert und die Setter-Funktion zuzugreifen, machen wir uns die **ES2015 Array Destructuring**-Methode zu nutze. Diese sorgt dafür, dass der erste Wert des Arrays in die Variable `value`, der zweite Wert in die Variable `setValue` geschrieben wird. Beide Namen sind dabei frei wählbar, es hat sich jedoch schnell eingebürgert, dem State einen kurzen, prägnanten Namen zu geben und der Setter-Funktion den gleichen Namen zu geben mit einem Verb wie etwa `set`, `change` oder `update` davor. Die Syntax ist also eine Abkürzung für das folgende ES5 Äquivalent: ```javascript var state = React.useState(0); var value = state[0]; var setValue = state[1]; ``` Im JSX, das wir aus der `Counter`-Komponente zurückgeben, greifen wir nun direkt auf `value` statt auf `this.state.value` zu und setzen den neuen Wert mittels eines sehr kurzen `setValue(value + 1)` statt wie zuvor in der Klassen-Komponente mittels `this.setState((state) => ({ value: state + 1 }))`. Wir haben so eben unsere erste **Function Component** erstellt, die **stateful** ist! {% hint style="info" %} Wir haben an dieser Stelle unseren ersten **Hook** verwendet: `useState()`. Dazu haben wir die Methode `React.useState()` aufgerufen. **Hooks** können auch direkt aus dem `react`-Package importiert werden. Dies ist insbesondere sinnvoll wenn ein Hook mehrmals verwendet wird. So spart man sich dann in der Komponente einiges an Schreibarbeit: ```jsx import React, { useEffect, useState } from 'react'; ``` So können wir in der Komponente bequem direkt `useState()` nutzen, statt jedesmal `React.useState()` schreiben zu müssen. {% endhint %} Komponenten sind dabei nicht auf nur einen Hook je Typ beschränkt und so kann es jede Art von Hook auch mehrmals in einer Komponente geben. Möchten wir bspw. zwei Counter hochzählen, müssen wir die Zählerwerte nicht in einem Zähler-Objekt verwalten, sondern können auch mehrere States erzeugen: ```jsx import React from 'react'; import ReactDOM from 'react-dom'; const Counter = () => { const [ firstValue, setFirstValue ] = React.useState(0); const [ secondValue, setSecondValue ] = React.useState(0); return (

Zählerwert 1: {firstValue}

Zählerwert 2: {secondValue}

); } ReactDOM.render(, document.getElementById('root')); ``` Für die Arbeit mit komplexen States erfahren wir im weiteren Verlauf dieses Buchs noch mehr über die Verwendung des `useReducer()`-Hooks. Dieser wurde eingeführt um die Verwaltung komplexer States zu vereinfachen. ### Seiteneffekte mit useEffect() Der `useEffect()`-**Hook** erhält seinen Namen daher, dass dieser dazu vorgesehen ist, ihn für **Side Effects** zu benutzen. Also Seiteneffekte wie das Laden von Daten via API, das Registrieren von globalen Events oder die Manipulation von DOM-Elementen. Der Hook bildet die Funktionalität der `componentDidMount()`, `componentDidUpdate()` und `componentWillUnmount()`-Lifecycle Methoden ab. Ja, richtig gelesen: Statt der genannten *drei* Methoden gibt es nun nur noch *einen einzigen* **Hook**, der an die vergleichbare Stelle der Methoden aus Klassen-Komponenten tritt. Der Trick dabei ist die genaue Verwendung ganz bestimmter Funktionsparameter und Rückgabewerte, wie sie für den `useEffect()`-Hook vorgesehen sind. Zur Benutzung des Hooks wird der `useEffect()`-Funktion selbst eine Funktion als erster Parameter übergeben. Diese Funktion, nennen wir sie der Einfachheit halber **„Effekt-Funktion“**, wird von React grundsätzlich erst einmal **nach** jedem Rendering der Komponente ausgeführt und tritt damit an die Stelle von `componentDidUpdate()` in Klassen-Komponenten. Da diese **Effekt-Funktion** nach **jedem** Rendering der Komponente aufgerufen wird, wird sie eben auch nach dem **ersten** Rendering aufgerufen, was an dieser Stelle gleichgesetzt werden kann mit der `componentDidMount()` Lifecycle-Methode aus den Klassen-Komponenten. Darüber hinaus kann die *Effekt*-Funktion optional selbst wiederum eine Funktion zurückgeben. Nennen wir sie **„Aufräum-Funktion“**. Diese *Aufräum*-Funktion wird beim **Unmounting** der Komponente aufgerufen, womit wir bei der nächsten Lifecycle-Methode wären, nämlich `componentWillUnmount()`. Doch Vorsicht: Hier haben wir gleichzeitig auch die erste Abweichung in der Funktionsweise verglichen mit Klassen-Komponenten. Und so wird unsere *Aufräum*-Funktion nicht nur beim **Unmounting** der Komponente aufgerufen, sondern auch **vor jeder erneuten Ausführung** der *Effekt*-Funktion. Dieses Verhalten kann aktiv gesteuert werden, indem dem `useEffect()`-Hook als zweiter Parameter ein Array mit sog. **Dependencies** übergeben wird. Dabei handelt es sich um Werte, von denen die Ausführung der **Effekt-Funktion** abhängt. Wird ein **Dependency-Array** übergeben, wird der Hook nur einmal initial ausgeführt und dann erst wieder, wenn sich mind. einer der Werte im **Dependency-Array** geändert hat. Möchte man hingegen gezielt ein Verhalten ähnlich dem von `componentDidMount()` simulieren, kann ein leeres Array als zweiter Parameter übergeben werden. React führt die Effekt-Funktion dann nur beim ersten Rendern aus und ruft erst beim **Unmounting** wieder eine eventuell definierte Aufräum-Funktion auf. Das klingt jetzt alles sicher wieder fürchterlich kompliziert, wenn man mit der Funktionsweise des Hooks nicht vertraut ist, lässt sich aber mit einem kurzen Code-Beispiel relativ einfach demonstrieren: ```jsx import React, { useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; const defaultTitle = 'React mit Hooks'; const Counter = () => { const [ value, setValue ] = useState(0); useEffect(() => { // `document.title` wird bei jeder Änderung (didMount/didUpdate) gesetzt. // Vorausgesetzt der `value` hat sich gendert document.title = `Der Button wurde ${value} mal geklickt`; // Hier geben wir unsere „Aufräum-Funktion“ zurück die vor jedem Update // den Titel auf den Standardwert zurücksetzt return () => { document.title = defaultTitle; } // Zuletzt unsere Dependency. Durch sie wird die Effekt-Funktion nur aufgerufen // wenn sich auch der `value` geändert hat. }, [value]); return (

Zählerwert: {value}

); } ReactDOM.render(, document.getElementById('root')); ``` Da der **Hook** sich stets *innerhalb* der Funktion befindet, hat er (ähnlich wie die Lifecycle-Methoden in Klassen-Komponenten) den vollen Zugriff auf die **Props** und den **State** der Komponente. Dabei ist der State in der **Function Component** selbst natürlich wiederum nur ein Hook, nämlich der `useState()`-Hook. Durch die Verwendung des `useEffect()`-**Hooks** können wir hier die Komplexität verringern, da die Komponente nicht viele, zum Teil sehr ähnliche Dinge an mehreren Stellen innerhalb der Komponente ausführen muss, sondern sich alle für die Komponente relevanten Lifecycle-Events in nur einer einzigen Funktion, eben dem **Hook**, abspielen. Zum Vergleich dazu möchte ich hier einmal zeigen, wie der oben gezeigte `useEffect()`-**Hook** mit einer Klassen-Komponente implementiert werden würde: ```jsx import React from "react"; import ReactDOM from "react-dom"; const defaultTitle = "React mit Hooks"; class Counter extends React.Component { state = { value: 0, }; componentDidMount() { document.title = `Der Button wurde ${this.state.value} mal geklickt`; } componentDidUpdate(prevProps, prevState) { if (prevState.value !== this.state.value) { document.title = `Der Button wurde ${this.state.value} mal geklickt`; } } componentWillUnmount() { document.title = defaultTitle; } render() { return (

Zählerwert: {this.state.value}

); } } ReactDOM.render(, document.getElementById("root")); ``` Hier kann natürlich darüber diskutiert werden, dass man den Aufruf zum Ändern des `document.title` in eine eigene Klassen-Methode wie etwa `setDocumentTitle()` auslagert, das sind allerdings Details, die an der höheren Komplexität der Klassen-Komponente im direkten Vergleich mit **Hooks** nicht wirklich etwas ändern. Auch dann müsste noch immer zweimal die gleiche (nun abstrahierte) Funktion an zwei verschiedenen Stellen (nämlich `componentDidMount()` und `componentDidUpdate()`) aufgerufen werden. Zusätzlich hätten wir eine weitere Klassen-Methode, die die Klasse nur noch weiter aufbläht und so die Duplikation nur zu Lasten einer Abstraktion auflöst. ### Zugriff auf Context mit useContext() Der dritte Basic Hook im Bunde ist `useContext()`. Mit ihm wird es ein Kinderspiel, Daten aus einem Context-Provider zu konsumieren, ohne dass dazu umständlich eine Provider-Komponente mit einer Function as a Child verwendet werden muss. Dazu bekommt der `useContext()`-Hook einen mittels `React.createContext()` erzeugten Context übergeben und gibt dann den Wert des in der Komponenten-Hierarchie nächsthöheren Providers zurück. Wird der Wert des Contexts im Provider geändert, löst der `useContext()`-Hook ein Rerendering mit den aktualisierten Daten aus dem Provider aus. Damit ist über die Funktionsweise auch schon alles gesagt. Der Hook ist tatsächlich eher simpler Natur: ```jsx import React, { useContext } from "react"; import ReactDOM from "react-dom"; const AccountContext = React.createContext({}); const ContextExample = () => { const accountData = useContext(AccountContext); return (

Name: {accountData.name}

Rolle: {accountData.role}

); }; const App = () => ( ); ReactDOM.render(, document.getElementById("root")); ``` Hier sehen wir, wie die `ContextExample`-Komponente Daten (in diesem Beispiel Pseudo-Account-Daten) aus dem `AccountContext`-Provider verwendet, ohne dass dafür alles von einer `AccountContext.Consumer`-Komponente umschlossen sein muss. Dies spart nicht nur einige Zeilen Code in der Komponente selbst, sondern führt auch in der Debug-Ansicht zu einem deutlich übersichtlicheren Baum, da die Verschachtelungstiefe flacher ist. Diese Vereinfachung ist aber völlig optional und wer mag, kann auch weiterhin die bekannte Consumer-Komponente für den Zugriff auf Daten aus einem Context-Provider verwenden. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://lernen.react-js.dev/hooks/hooks-in-aller-kuerze.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.