Eigenen React-Hook mit TypeScript und Tests erstellen

Prompt

Arbeite als Senior-React-Entwickler, der wiederverwendbare, sauber typisierte Custom Hooks schreibt.

Kontext:
- Aufgabe des Hooks: {{zweck_hook}}
- Datenquelle oder API-Vertrag: {{datenvertrag}}
- Stack: {{stack}}
- Test-Setup: {{tests}}

Bevor du Code schreibst, frag nach allem Wesentlichen, das fehlt (genaue Antwortstruktur, Fehlerformat, ob der Hook auch auf dem Server läuft).

Liefere:
1. Die öffentliche API des Hooks: Name (beginnend mit „use“), Parameter, Rückgabewert und warum diese Form (Objekt oder Tupel).
2. Die vollständige Implementierung in TypeScript mit expliziten Typen und ohne `any`.
3. Saubere Behandlung von: Cleanup beim Unmount, Race Conditions zwischen Requests (AbortController oder Ignore-Flag), stabilen Callbacks (useCallback/useRef nur, wo es wirklich zählt) sowie Lade-, Fehler- und Leerzuständen.
4. Eine kurze Beispielkomponente, die den Hook nutzt.
5. Tests mit {{tests}} für den Normalfall, einen Fehler, eine veraltete Antwort, die zu spät ankommt, und den Unmount während eines Requests (mit Fake-Timern bei Debounce). Bei „keine Tests“ liste die Fälle auf, die ich manuell prüfen sollte.
6. Grenzen: was der Hook nicht abdeckt (Caching, Retries, SSR) und wann eine Bibliothek wie TanStack Query die bessere Wahl ist.

Vorgaben:
- Halte die Rules of Hooks ein und nutze useEffect nicht, um State abzuleiten, der sich beim Rendern berechnen lässt.
- Erfinde keine Endpunkte oder Felder über {{datenvertrag}} hinaus; nutze [AUSFÜLLEN], wo Informationen fehlen.
- Kommentare nur, wenn der Grund nicht offensichtlich ist.

Format: Abschnitte mit Überschriften und ein Codeblock pro Datei mit Dateinamen.

So verwenden Sie ihn

Anwendungsbeispiel

Beispielergebnis

import { useEffect, useState } from 'react';

export type Produkt = { id: string; name: string }; // [AUSFÜLLEN: echte Felder]
type Zustand = { items: Produkt[]; total: number; loading: boolean; error: Error | null };
const initial: Zustand = { items: [], total: 0, loading: false, error: null };

export function useProductSearch(query: string, delay = 300): Zustand {
  const [zustand, setZustand] = useState<Zustand>(initial);

  useEffect(() => {
    const q = query.trim();
    if (!q) return setZustand(initial);
    const controller = new AbortController();
    const timer = setTimeout(async () => {
      setZustand((s) => ({ ...s, loading: true, error: null }));
      try {
        const res = await fetch(`/api/produkte?q=${encodeURIComponent(q)}`, { signal: controller.signal });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data: { items: Produkt[]; total: number } = await res.json();
        setZustand({ ...data, loading: false, error: null });
      } catch (err) {
        if (!controller.signal.aborted) setZustand((s) => ({ ...s, loading: false, error: err as Error }));
      }
    }, delay);
    return () => { clearTimeout(timer); controller.abort(); };
  }, [query, delay]);

  return zustand;
}

Wichtige Fakten

Kategorie

Programmierung & Entwicklung · React

Ausgabetyp

Code

Niveau

Fortgeschritten

Entwickelt für

ChatGPT, Claude, Gemini und Microsoft Copilot

Verifiziert in

Redaktionelle Prüfung ausstehend

Variablen

Aufgabe des Hooks, Daten- oder API-Vertrag, Stack und Tests

Sprache

Deutsch

Preis

Kostenlos, ohne Anmeldung

Aktualisiert

07.11.2026

Häufig gestellte Fragen