Custom Hooks: wiederverwendbare Logik extrahieren
Verschieben Sie zustandsbehaftete Logik in benutzerdefinierte use*-Funktionen, um Verhalten komponentenübergreifend zu teilen, ohne Code zu duplizieren oder State nach oben zu verschieben.
Custom Hooks: wiederverwendbare Logik extrahieren ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind eigene Hooks?
Ein eigener Hook ist eine JavaScript-Funktion, deren Name mit use beginnt und die intern andere Hooks aufruft. Eigene Hooks ermöglichen es, zustandsbehaftete Logik auszulagern, sodass mehrere Komponenten sie ohne Copy-and-paste gemeinsam nutzen können.
Logik in einen eigenen Hook auslagern
Identifizieren Sie Logik, die in mehreren Komponenten doppelt vorhanden ist (Abrufen von Daten, Laden und Fehlerbehandlung, Fenstergröße, lokaler Speicher), und verschieben Sie sie in einen eigenen Hook.
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handler = () => setWidth(window.innerWidth);
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler);
}, []);
return width;
}
// Usage:
const width = useWindowWidth();
const isMobile = width < 768;useFetch — Hook zum Abrufen von Daten
Ein wiederverwendbarer Hook zum Abrufen von Daten, den jede Komponente verwenden kann, um Daten von einer URL zu laden.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const controller = new AbortController();
async function load() {
try {
const res = await fetch(url, { signal: controller.signal });
if (!res.ok) throw new Error(`${res.status}`);
setData(await res.json());
} catch (err) {
if ((err as DOMException).name !== 'AbortError')
setError((err as Error).message);
} finally { setLoading(false); }
}
load();
return () => controller.abort();
}, [url]);
return { data, loading, error };
}useLocalStorage-Hook
Ein eigener Hook, der einen Wert mit localStorage synchronisiert und ihn über das storage-Ereignis auch in mehreren Tabs synchron hält.
function useLocalStorage<T>(key: string, initialValue: T) {
const [value, setValue] = useState<T>(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
const set = useCallback((newValue: T) => {
setValue(newValue);
localStorage.setItem(key, JSON.stringify(newValue));
}, [key]);
return [value, set] as const;
}Eigene Hooks teilen Logik, nicht Zustand
Jede Komponente, die einen eigenen Hook aufruft, erhält ihren eigenen unabhängigen Zustand. Hooks sind keine Singletons — sie sind Funktionsaufrufe, die isolierte Zustandsinstanzen erzeugen.
Namenskonventionen
Namen eigener Hooks müssen mit use beginnen. Dies wird durch die ESLint-Regeln für React-Hooks erzwungen. Sie stellen sicher, dass Hooks auf der obersten Ebene und in der richtigen Reihenfolge aufgerufen werden.
Mehrere Werte zurückgeben
Eigene Hooks geben typischerweise ein Objekt (benannte Werte) oder ein Tupel (wie useState) zurück. Tupel ermöglichen das Destructuring mit eigenen Namen; Objekte sind selbsterklärend.
// Tuple (like useState):
const [value, setValue] = useLocalStorage('key', 0);
// Object (more descriptive):
const { data, loading, error, refetch } = useFetch('/api/users');useDebounce-Hook
Verzögern Sie die Aktualisierung eines Werts, bis die Eingabe für eine festgelegte Zeitspanne beendet wurde.
function useDebounce<T>(value: T, delay: number): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}
// Usage:
const debouncedSearch = useDebounce(searchTerm, 300);
useEffect(() => { search(debouncedSearch); }, [debouncedSearch]);useMediaQuery-Hook
Dieser Hook kapselt window.matchMedia, um die Ergebnisse von CSS-Media-Queries reaktiv auszulesen.
function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
useEffect(() => {
const mq = window.matchMedia(query);
const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}, [query]);
return matches;
}Eigene Hooks testen
Verwenden Sie das Dienstprogramm renderHook() aus @testing-library/react, um eigene Hooks isoliert zu testen, ohne sie in eine Komponente einbinden zu müssen.
import { renderHook, act } from '@testing-library/react';
test('useCounter increments', () => {
const { result } = renderHook(() => useCounter(0));
expect(result.current.count).toBe(0);
act(() => result.current.increment());
expect(result.current.count).toBe(1);
});Veröffentlichte Hook-Bibliotheken
Bibliotheken aus der Community stellen Hunderte getestete Hooks bereit: @uidotdev/usehooks, react-use, usehooks-ts. Prüfen Sie vor dem Schreiben eines eigenen Hooks, ob bereits eine gut getestete Variante existiert.
Kurze Prüfung
Was geschieht mit dem Zustand innerhalb eines eigenen Hooks, wenn er von zwei verschiedenen Komponenten aufgerufen wird?
Zusammenfassung: Eigene Hooks
Eigene Hooks lagern zustandsbehaftete Logik zur Wiederverwendung aus. Benennen Sie sie mit dem Präfix use. Jede Komponente, die den Hook aufruft, erhält einen unabhängigen Zustand. Geben Sie Objekte oder Tupel zurück. Gängige Muster sind useFetch, useLocalStorage, useDebounce und useMediaQuery. Testen Sie mit renderHook(). Prüfen Sie Bibliotheken aus der Community, bevor Sie einen Hook von Grund auf neu schreiben.
Häufig gestellte Fragen
Ist die Lektion „Custom Hooks: wiederverwendbare Logik extrahieren“ kostenlos?
Ja — der vollständige Text von „Custom Hooks: wiederverwendbare Logik extrahieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Custom Hooks: wiederverwendbare Logik extrahieren“?
Verschieben Sie zustandsbehaftete Logik in benutzerdefinierte use*-Funktionen, um Verhalten komponentenübergreifend zu teilen, ohne Code zu duplizieren oder State nach oben zu verschieben. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Custom Hooks: wiederverwendbare Logik extrahieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- useContext für globalen State
- useReducer für komplexen State
- useMemo und useCallback für Performance
- Custom Hooks: wiederverwendbare Logik extrahieren