Crear un hook personalizado de React con TypeScript y tests

Prompt

Actúa como ingeniero sénior de React especializado en hooks reutilizables y bien tipados.

Contexto:
- Qué debe hacer el hook: {{proposito_hook}}
- Fuente de datos o contrato de la API: {{contrato_datos}}
- Stack: {{stack}}
- Herramienta de tests: {{tests}}

Antes de escribir código, pregúntame lo imprescindible que falte (forma exacta de la respuesta, formato de los errores, si el hook se ejecuta también en servidor).

Entregables:
1. La API pública del hook: nombre (empezando por «use»), parámetros, valor de retorno y por qué esa forma (objeto o tupla).
2. La implementación completa en TypeScript, con tipos explícitos y sin `any`.
3. Gestión correcta de: limpieza al desmontar, condiciones de carrera entre peticiones (AbortController o bandera de descarte), callbacks estables (useCallback/useRef solo donde importe de verdad) y estados de carga, error y vacío.
4. Un componente de ejemplo breve que use el hook.
5. Tests con {{tests}} que cubran el caso feliz, un error, una respuesta antigua que llega tarde y el desmontaje durante una petición (con temporizadores falsos si hay debounce). Si eliges «sin tests», enumera los casos que debería probar a mano.
6. Limitaciones: qué no hace el hook (caché, reintentos, SSR) y cuándo convendría una librería como TanStack Query.

Restricciones:
- Respeta las reglas de los hooks y no uses useEffect para derivar estado que puede calcularse durante el render.
- No inventes endpoints ni campos fuera de {{contrato_datos}}; usa [COMPLETAR] donde falte información.
- Comentarios solo cuando el motivo no sea evidente.

Formato: secciones con encabezados y un bloque de código por archivo, con su nombre.

Cómo usarlo

Ejemplo de uso

Resultado de ejemplo

import { useEffect, useState } from 'react';

export type Producto = { id: string; nombre: string }; // [COMPLETAR: campos reales]
type Estado = { items: Producto[]; total: number; loading: boolean; error: Error | null };
const inicial: Estado = { items: [], total: 0, loading: false, error: null };

export function useProductSearch(query: string, delay = 300): Estado {
  const [estado, setEstado] = useState<Estado>(inicial);

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

  return estado;
}

Datos clave

Categoría

Programación y desarrollo · React

Tipo de resultado

Código

Nivel

Intermedio

Pensado para

ChatGPT, Claude, Gemini y Microsoft Copilot

Verificado en

Pendiente de verificación editorial

Variables

Qué debe hacer el hook, Contrato de datos o API, Stack y Tests

Idioma

Español

Precio

Gratis, sin registro

Actualizado

07/11/2026

Preguntas frecuentes