React Custom Hooks: Eigene Hooks schreiben, mit Beispielen

Ein Custom Hook ist eine Funktion, deren Name mit use beginnt und die andere Hooks aufruft. Du schreibst einen, wenn zwei Komponenten dieselbe zustandsbehaftete Logik brauchen: Verschiebe die Aufrufe von useState und useEffect in die Funktion, gib zurück, was die Komponente braucht, und ruf sie aus jeder Komponente auf.

import { useState } from 'react';

function useToggle(initial = false) {
    const [on, setOn] = useState(initial);
    const toggle = () => setOn((v) => !v);
    return [on, toggle];
}

function Spoiler({ title, children }) {
    const [open, toggle] = useToggle();
    return (
        <div style={{ marginBottom: 8 }}>
            <button onClick={toggle}>{open ? 'Hide' : 'Show'} {title}</button>
            {open && <p>{children}</p>}
        </div>
    );
}

export default function App() {
    return (
        <div>
            <Spoiler title="ending">The butler did it.</Spoiler>
            <Spoiler title="sequel">The butler did it again.</Spoiler>
        </div>
    );
}

Beide Spoiler rufen useToggle auf, und einen zu öffnen lässt den anderen geschlossen. Jeder Aufruf führt sein eigenes useState aus, also bekommt jede Komponente ihren eigenen Wert. Ein Custom Hook teilt Logik, keinen State.

Die Regeln zum Schreiben

• Der Name beginnt mit use und einem Großbuchstaben: useToggle, useOnlineStatus. Die Lint-Regel für Hooks findet Hook-Aufrufe über das Präfix und prüft sie.
• Er ruft mindestens einen Hook auf. Ein Helfer, der keine Hooks aufruft, ist eine gewöhnliche Funktion; nenn ihn formatDate, nicht useFormatDate, damit er überall aufgerufen werden kann, auch in Bedingungen.
• Er folgt den Regeln der Hooks: Hooks auf seiner obersten Ebene aufrufen, und ihn nur aus Komponenten oder anderen Custom Hooks aufrufen.
• Er gibt zurück, was nützlich ist. Ein Array ([on, toggle]) ist praktisch, wenn Aufrufer die Werte umbenennen; ein Objekt ({ data, loading, error }) liest sich ab drei Werten besser.

useLocalStorage: State, der ein Neuladen übersteht

useState vergisst beim Neuladen alles. Dieser Hook liest den Startwert aus localStorage und schreibt jede Änderung zurück.

import { useState, useEffect } from 'react';

function readStored(key, fallback) {
    try {
        const raw = window.localStorage.getItem(key);
        return raw === null ? fallback : JSON.parse(raw);
    } catch {
        console.warn('localStorage is not available, keeping the value in memory');
        return fallback;
    }
}

function useLocalStorage(key, initial) {
    const [value, setValue] = useState(() => readStored(key, initial));

    useEffect(() => {
        try {
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch {
            // Storage blocked or full: the value still works for this visit
        }
    }, [key, value]);

    return [value, setValue];
}

export default function App() {
    const [name, setName] = useLocalStorage('demo-name', '');
    return (
        <div>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
            <p>Hello, {name || 'stranger'}.</p>
        </div>
    );
}

Die Vorschau läuft in einem Sandbox-Frame, in dem der Browser localStorage blockiert, also siehst du hier die Warnung in der Konsole, und der Hook fällt auf einfachen State zurück. Auf einer normalen Seite übersteht der Name ein Neuladen. Das try/catch ist nicht nur für diese Vorschau da: Private Modi, blockierte Cookies und ein volles Kontingent lassen den Speicher auch in echten Apps Fehler werfen. Eine Funktion an useState zu übergeben heißt, dass der Speicher einmal gelesen wird, beim ersten Render.

useDebounce: warten, bis nicht mehr getippt wird

Ein Suchfeld sollte nicht bei jedem Tastendruck eine Anfrage auslösen. useDebounce gibt eine Kopie eines Werts zurück, die sich erst aktualisiert, wenn er sich für eine bestimmte Verzögerung nicht mehr geändert hat.

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
    const [debounced, setDebounced] = useState(value);

    useEffect(() => {
        const id = setTimeout(() => setDebounced(value), delay);
        return () => clearTimeout(id);
    }, [value, delay]);

    return debounced;
}

export default function App() {
    const [text, setText] = useState('');
    const query = useDebounce(text, 500);

    useEffect(() => {
        if (query) console.log('search for:', query);
    }, [query]);

    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Search" />
            <p>Typed: {text}</p>
            <p>Debounced: {query}</p>
        </div>
    );
}

Tippe schnell ein Wort: Typed folgt jeder Taste, Debounced zieht eine halbe Sekunde nach, wenn du aufhörst, und die Konsole loggt eine Suche. Jeder Tastendruck ändert value, also führt React das Cleanup (clearTimeout) aus, bevor es einen neuen Timer startet. Ändere 500 zu 0, und jeder Tastendruck loggt seine eigene Suche.

useWindowWidth: abonnieren mit Cleanup

Ein Hook, der auf den Browser hört, muss seinen Listener entfernen, wenn die Komponente verschwindet, sonst hinterlässt jedes Mounten einen.

import { useState, useEffect } from 'react';

function useWindowWidth() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const onResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', onResize);
        console.log('resize listener added');
        return () => {
            window.removeEventListener('resize', onResize);
            console.log('resize listener removed');
        };
    }, []);

    return width;
}

function WidthBadge() {
    const width = useWindowWidth();
    return <p>This frame is {width}px wide: {width < 500 ? 'narrow' : 'wide'} layout.</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Unmount' : 'Mount'} badge</button>
            {show && <WidthBadge />}
        </div>
    );
}

Ändere die Größe des Browserfensters, und die Zahl folgt. Klicke auf den Button, und die Konsole zeigt, wie der Listener entfernt wird. Lösch das return aus dem Effekt und mounte und unmounte ein paar Mal: Du bekommst jedes Mal eine Zeile added und keine removed, also häufen sich die alten Listener an. Für Browserwerte wie diesen ist useSyncExternalStore der Hook, den React genau dafür gebaut hat, und er lässt sich gut in einem Custom Hook aufrufen.

Logik wird geteilt, State nicht

Zwei Komponenten, die denselben Hook aufrufen, bekommen zwei getrennte Kopien von allem darin. Das überrascht Leute, die erwarten, dass ein Hook wie eine globale Variable funktioniert.

import { useState } from 'react';

function useCounter() {
    const [count, setCount] = useState(0);
    return [count, () => setCount((c) => c + 1)];
}

function Counter({ name }) {
    const [count, increment] = useCounter();
    return (
        <p>
            {name}: {count} <button onClick={increment}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter name="First" />
            <Counter name="Second" />
        </div>
    );
}

Klicke auf einen der Buttons, und nur dieser Zähler bewegt sich. Wenn beide dieselbe Zahl zeigen sollen, verschiebe den State in App und reich ihn nach unten oder leg ihn in Context. Ein Custom Hook kann diesen geteilten State bequem verpacken (useCart(), das einen CartContext liest), aber das Teilen kommt vom Context, nicht vom Hook.

Wann du einen Custom Hook schreibst

Lagere einen Hook aus, wenn dieselbe Gruppe von Hook-Aufrufen in zwei Komponenten auftaucht oder wenn die Effektlogik einer Komponente so lang ist, dass ein Name sie besser erklären würde (useOnlineStatus() liest sich besser als zwanzig Zeilen Listener). Pack keinen einzelnen useState-Aufruf in einen Hook, nur um ihn umzubenennen, und schreib keine Hooks, die nur useEffect aufrufen, um State aus Props zu setzen; berechne diesen Wert stattdessen beim Rendern.