Einführung in Hooks

Was sind Hooks?

Ein Hook ist eine Funktion, die React-interne Mechanismen nutzt — typischerweise um etwas zwischen Renders zu speichern oder Side-Effects auszulösen. Die Komponente selbst läuft bei jedem Render neu, aber der Hook „erinnert" sich an seinen Zustand.

import { useState, useEffect } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);   // State-Hook

    useEffect(() => {                         // Side-Effect-Hook
        document.title = `Klicks: ${count}`;
    }, [count]);

    return (
        <button onClick={() => setCount(c => c + 1)}>
            Klicks: {count}
        </button>
    );
};

useState speichert count über Re-Renders hinweg. useEffect führt nach jedem Render mit geändertem count einen Side-Effect aus. Beides funktioniert nur, weil React sich pro Komponente merkt, welcher Hook welchen Wert hat.

Die zwei Hook-Regeln

Regel 1: Nur auf der Top-Ebene

Hooks müssen immer in derselben Reihenfolge und Anzahl aufgerufen werden. Dadurch kann React sie intern korrekt zuordnen.

// FALSCH — bedingter Hook-Aufruf
const Broken = ({ enabled }) => {
    if (enabled) {
        const [count, setCount] = useState(0);  // FEHLER
    }
    return <p>Hi</p>;
};

// FALSCH — Hook in Schleife
const BrokenLoop = ({ items }) => {
    for (const item of items) {
        const [x, setX] = useState(0);  // FEHLER
    }
};

// RICHTIG — Top-Level, immer aufgerufen
const Fixed = ({ enabled }) => {
    const [count, setCount] = useState(0);
    if (!enabled) return null;
    return <p>{count}</p>;
};

Daher sind Hooks niemals in if, for, while, try/catch oder nach einem Early-Return erlaubt. Bedingte Logik gehört INNERHALB des Hook-Callbacks oder als Verzweigung im JSX.

Regel 2: Nur in React-Funktionen

Hooks dürfen aufgerufen werden in:

• React-Function-Components (mit PascalCase-Namen)
• Custom Hooks (Funktionen, deren Name mit use beginnt)

Nicht erlaubt in: normalen Funktionen, Klassen-Components, Event-Handlern, Promise-Callbacks, asynchronen Funktionen.

// FALSCH — kein Component, kein Custom Hook
function helper() {
    const [x] = useState(0);   // FEHLER
}

// RICHTIG — Custom Hook (Name beginnt mit `use`)
function useCounter(start = 0) {
    const [count, setCount] = useState(start);
    return [count, () => setCount(c => c + 1)];
}

// RICHTIG — Function-Component
function App() {
    const [count, inc] = useCounter(0);
    return <button onClick={inc}>{count}</button>;
}

Der Linter eslint-plugin-react-hooks mit der Regel rules-of-hooks erkennt Verstöße zuverlässig.

Eingebaute Hooks im Überblick

Dazu kommen die selteneren useDebugValue (für React DevTools) und useInsertionEffect (für CSS-in-JS-Libraries).

Custom Hooks

Eigene Hooks sind Funktionen, die andere Hooks aufrufen und wiederverwendbare Logik bündeln. Konvention: der Name beginnt mit use.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initial) {
    const [value, setValue] = useState(() => {
        const stored = localStorage.getItem(key);
        return stored ? JSON.parse(stored) : initial;
    });

    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(value));
    }, [key, value]);

    return [value, setValue];
}

// Verwendung
const Theme = () => {
    const [theme, setTheme] = useLocalStorage('theme', 'light');
    return <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>{theme}</button>;
};

Custom Hooks haben die gleichen Regeln wie eingebaute — Top-Level, in Components oder anderen Hooks. Der use-Prefix ist nicht nur Konvention, sondern wird vom Linter zur Hook-Erkennung genutzt.

Hooks vs. Class-Lifecycles

Der wichtigste Unterschied: Class-Lifecycles waren zeitlich organisiert (mount, update, unmount). Hooks sind konzeptuell organisiert (State, Effect, Memo) — ein Effect kann sowohl beim Mount als auch bei jedem Update laufen, abhängig vom Dependency-Array.

Weiterführende Ressourcen

Externe Quellen

• Hooks – react.dev
• Rules of Hooks – react.dev
• Reusing Logic with Custom Hooks – react.dev
• eslint-plugin-react-hooks – npm

Verwandte Artikel

• useState
• useEffect
• Einführung in State
• Einführung Custom Hooks
• Einführung in Components