Créer un hook React personnalisé avec TypeScript et des tests

Prompt

Agis comme un ingénieur React senior spécialisé dans les hooks réutilisables et bien typés.

Contexte :
- Ce que doit faire le hook : {{objectif_hook}}
- Source de données ou contrat d'API : {{contrat_donnees}}
- Stack : {{stack}}
- Outil de test : {{tests}}

Avant d'écrire du code, pose-moi les questions indispensables s'il manque une information (forme exacte de la réponse, format des erreurs, exécution éventuelle côté serveur).

Livrables :
1. L'API publique du hook : nom (commençant par « use »), paramètres, valeur de retour et justification de cette forme (objet ou tuple).
2. L'implémentation complète en TypeScript, avec des types explicites et sans `any`.
3. Une gestion correcte : nettoyage au démontage, conditions de concurrence entre requêtes (AbortController ou drapeau d'abandon), callbacks stables (useCallback/useRef seulement là où c'est utile) et états de chargement, d'erreur et de résultat vide.
4. Un court composant d'exemple qui utilise le hook.
5. Des tests avec {{tests}} couvrant le cas nominal, une erreur, une ancienne réponse qui arrive en retard et le démontage pendant une requête (avec de faux timers s'il y a un debounce). Si j'ai choisi « sans tests », liste les cas à vérifier à la main.
6. Les limites : ce que le hook ne fait pas (cache, nouvelles tentatives, SSR) et quand une bibliothèque comme TanStack Query serait préférable.

Contraintes :
- Respecte les règles des hooks et n'utilise pas useEffect pour dériver un état calculable pendant le rendu.
- N'invente ni endpoint ni champ en dehors de {{contrat_donnees}} ; utilise [À COMPLÉTER] quand une information manque.
- Des commentaires uniquement quand la raison n'est pas évidente.

Format : sections avec titres et un bloc de code par fichier, avec son nom.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

import { useEffect, useState } from 'react';

export type Produit = { id: string; nom: string }; // [À COMPLÉTER : vrais champs]
type Etat = { items: Produit[]; total: number; loading: boolean; error: Error | null };
const initial: Etat = { items: [], total: 0, loading: false, error: null };

export function useProductSearch(query: string, delay = 300): Etat {
  const [etat, setEtat] = useState<Etat>(initial);

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

  return etat;
}

Informations clés

Catégorie

Programmation et développement · React

Type de résultat

Code

Niveau

Intermédiaire

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Ce que doit faire le hook, Contrat de données ou d’API, Stack et Tests

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes