Creare un hook React personalizzato con TypeScript e test

Prompt

Agisci come ingegnere React senior specializzato in hook riutilizzabili e ben tipizzati.

Contesto:
- Cosa deve fare l'hook: {{scopo_hook}}
- Fonte dei dati o contratto dell'API: {{contratto_dati}}
- Stack: {{stack}}
- Strumento di test: {{test}}

Prima di scrivere codice, chiedimi ciò che manca di essenziale (forma esatta della risposta, formato degli errori, se l'hook gira anche lato server).

Consegna:
1. L'API pubblica dell'hook: nome (che inizi con «use»), parametri, valore di ritorno e perché quella forma (oggetto o tupla).
2. L'implementazione completa in TypeScript, con tipi espliciti e senza `any`.
3. Gestione corretta di: pulizia allo smontaggio, race condition tra richieste (AbortController o flag di scarto), callback stabili (useCallback/useRef solo dove serve davvero) e stati di caricamento, errore e vuoto.
4. Un breve componente di esempio che usa l'hook.
5. Test con {{test}} che coprano il caso felice, un errore, una risposta vecchia che arriva in ritardo e lo smontaggio durante una richiesta (con timer finti se c'è debounce). Se ho scelto «senza test», elenca i casi da verificare a mano.
6. Limiti: cosa non fa l'hook (cache, retry, SSR) e quando conviene una libreria come TanStack Query.

Vincoli:
- Rispetta le regole degli hook e non usare useEffect per derivare stato calcolabile durante il render.
- Non inventare endpoint o campi oltre {{contratto_dati}}; usa [DA COMPLETARE] dove mancano informazioni.
- Commenti solo quando il motivo non è evidente.

Formato: sezioni con titoli e un blocco di codice per file, con il suo nome.

Come usarlo

Esempio d'uso

Esempio di risultato

import { useEffect, useState } from 'react';

export type Prodotto = { id: string; nome: string }; // [DA COMPLETARE: campi reali]
type Stato = { items: Prodotto[]; total: number; loading: boolean; error: Error | null };
const iniziale: Stato = { items: [], total: 0, loading: false, error: null };

export function useProductSearch(query: string, delay = 300): Stato {
  const [stato, setStato] = useState<Stato>(iniziale);

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

  return stato;
}

Dati chiave

Categoria

Programmazione e sviluppo · React

Tipo di output

Codice

Livello

Intermedio

Pensato per

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificato in

In attesa di verifica editoriale

Variabili

Cosa deve fare l’hook, Contratto dati o API, Stack e Test

Lingua

Italiano

Prezzo

Gratuito, senza registrazione

Aggiornato

07/11/2026

Domande frequenti