React Hooks sind eine Funktionen, die von React bereitgestellt wird, um Zustände und lebenszyklusbezogene Funktionen in funktionalen Komponenten zu verwenden. Vor React Hooks war dies nur in Klassenkomponenten möglich.
Es gibt mehrere eingebaute Hooks in React, darunter useState, useEffect, useContext, useReducer und useRef.
So verwendet man zum Beispiel `useState`:
```jsx
import React, { useState } from ‘react’;
function BeispielKomponente() { // Deklariere eine neue Zustandsvariable, die wir “count” nennen const [count, setCount] = useState(0);
return (Du hast {count} Mal geklickt.
In diesem Beispiel erstellt `useState` eine Zustandsvariable namens `count` und eine Funktion `setCount`, um ihren Wert zu aktualisieren. Es initialisiert `count` mit dem Wert `0`.
Und so verwendet man `useEffect`:
```jsx
import React, { useState, useEffect } from ‘react’;
function BeispielKomponente() { const [count, setCount] = useState(0);
// Ähnlich zu componentDidMount und componentDidUpdate useEffect(() => { // Aktualisiere den Dokumententitel durch den Browser API document.title = `Du hast ${count} Mal geklickt`; }); return (Du hast {count} Mal geklickt.
Hier nutzt `useEffect` eine Funktion, die ausgeführt wird, nachdem die Komponente gerendert wurde. In diesem Fall aktualisiert es den Dokumententitel, nachdem React die Benutzeroberfläche aktualisiert hat.
