React Hooks: Jeder Hook mit Live-Beispielen erklärt

React Hooks sind Funktionen, deren Namen mit use beginnen und mit denen eine Funktionskomponente React-Features nutzt: useState, um sich einen Wert zu merken, useEffect, um nach dem Rendern Code auszuführen, useRef, um einen DOM-Knoten festzuhalten, useContext, um geteilte Daten zu lesen. Du rufst sie oben in deiner Komponente auf, und React behält ihre Werte zwischen Renders.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

Hier arbeiten vier Hooks zusammen. useState speichert den Text, useRef zeigt auf das Input, damit der Button es fokussieren kann, useMemo behält die gefilterte Liste, bis sich die Suche ändert, und useEffect loggt nach jedem Render, in dem sich die Suche geändert hat. Tippe an und beobachte die Konsole: eine Zeile pro Tastendruck, nachdem sich die Liste aktualisiert hat.

Warum es Hooks gibt

Vor React 16.8 musste eine Komponente, die State oder Lifecycle-Code brauchte, eine Klasse sein. Die Logik für ein Feature war auf componentDidMount, componentDidUpdate und componentWillUnmount verteilt, und sie zwischen Komponenten zu teilen hieß Mixins (die mit der Klassensyntax nie funktionierten), Higher Order Components oder Render Props, die alle deinen Baum in zusätzliche Schichten hüllten.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

Mit Hooks lebt dasselbe Feature an einem Ort: Der Effekt startet den Timer, und sein Cleanup stoppt ihn.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

Versteck die Uhr, und die Konsole gibt timer stopped aus: React hat das Cleanup ausgeführt, als Clock den Bildschirm verließ. Zeig sie wieder, und ein frischer Timer startet. Klassenkomponenten funktionieren in React 19 weiterhin, aber neuer Code nutzt Hooks.

Jeder eingebaute Hook

React 19.2 gruppiert seine Hooks danach, was sie einer Komponente geben. Die ersten beiden Gruppen nutzt du jeden Tag, den Rest, wenn ein bestimmtes Problem danach verlangt.

use, useActionState, useOptimistic und useFormStatus kamen mit React 19, und useEffectEvent wurde in 19.2 stabil. Jeder andere Hook der Liste funktioniert auch in React 18.

State rendert, Refs nicht

Nicht jeder Hook löst einen Render aus. useState und useReducer tun es: Ändere ihren Wert, und React zeichnet die Komponente neu. useRef gibt dir ein Objekt, dessen Feld current du frei ändern kannst, und React rendert deswegen nie neu. Das macht es zum richtigen Ort für eine Timer-ID, einen vorherigen Wert oder einen Zähler, den der Bildschirm nicht zeigt.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer hält den Warenkorb und useState die Notiz; beide lösen einen Render aus, wenn sie sich ändern, und der Effekt loggt eine Zeile pro Render. Der Effekt ändert auch commits.current, doch diese Änderung löst nie einen eigenen Render aus, also gerät das Log nicht in eine Schleife. Der Zähler wird in einem Effekt aktualisiert statt im Komponentenkörper, weil der Körper beim Rendern nichts ändern sollte.

Die Regeln der Hooks

Jeder Hook befolgt zwei Regeln:

1. Ruf Hooks auf der obersten Ebene deiner Komponente auf, nie in einer Bedingung, einer Schleife oder einer verschachtelten Funktion.
2. Ruf Hooks nur aus Funktionskomponenten oder aus deinen eigenen Custom Hooks auf.

React kennt Hooks nicht beim Namen. Es kennt sie an der Reihenfolge, in der du sie aufrufst, und erwartet, dass diese Reihenfolge bei jedem Render gleich ist. Ein Hook in einem if würde jeden Hook danach verschieben. Die Seite zu den Regeln der Hooks zeigt, was kaputtgeht und wie du es behebst. use ist die einzige Ausnahme: Es darf in einer Bedingung aufgerufen werden.

Dein erster Custom Hook

Wenn zwei Komponenten dieselbe zustandsbehaftete Logik brauchen, verschiebe sie in eine Funktion, deren Name mit use beginnt. Diese Funktion kann jeden anderen Hook aufrufen. Jede Komponente, die sie aufruft, bekommt ihren eigenen State.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

Beide Zähler führen denselben Hook aus, aber ein Klick auf den einen lässt den anderen in Ruhe: Ein Custom Hook teilt Logik, keinen State. Füge useCounter eine Funktion decrement und einen Button hinzu, der sie aufruft, und beide Zähler bekommen sie auf einmal. Weitere Muster (useToggle, useDebounce, useLocalStorage) stehen auf der Seite zu Custom Hooks.

Zu welchem Hook du greifst

• Der Bildschirm soll sich ändern, wenn sich ein Wert ändert: useState, oder useReducer, wenn viele Events denselben State aktualisieren.
• Du musst mit etwas außerhalb von React sprechen (einem Timer, einem Abonnement, einer Anfrage): useEffect.
• Du brauchst einen DOM-Knoten oder einen Wert, den der Bildschirm nicht zeigt: useRef.
• Viele Komponenten tief im Baum brauchen denselben Wert: useContext.
• Ein Render ist langsam wegen einer Berechnung oder weil ein memoisiertes Kind neu rendert: useMemo und useCallback. Der React Compiler kann diese Memoisierung für dich hinzufügen, aber sie von Hand zu schreiben funktioniert weiterhin und ist weiterhin üblich.
• Das Tippen fühlt sich träge an, weil das Update dahinter schwer ist: useTransition oder useDeferredValue.