Criar um hook personalizado de React com TypeScript e testes

Prompt

Atua como engenheiro sénior de React especializado em hooks reutilizáveis e bem tipados.

Contexto:
- O que o hook deve fazer: {{objetivo_hook}}
- Fonte de dados ou contrato da API: {{contrato_dados}}
- Stack: {{stack}}
- Ferramenta de testes: {{testes}}

Antes de escreveres código, pergunta-me o que faltar de essencial (forma exata da resposta, formato dos erros, se o hook também corre no servidor).

Entregáveis:
1. A API pública do hook: nome (a começar por «use»), parâmetros, valor de retorno e porquê essa forma (objeto ou tuplo).
2. A implementação completa em TypeScript, com tipos explícitos e sem `any`.
3. Tratamento correto de: limpeza ao desmontar, race conditions entre pedidos (AbortController ou flag de descarte), callbacks estáveis (useCallback/useRef só onde importa mesmo) e estados de carregamento, erro e vazio.
4. Um componente de exemplo curto que use o hook.
5. Testes com {{testes}} que cubram o caso feliz, um erro, uma resposta antiga que chega tarde e a desmontagem durante um pedido (com temporizadores falsos se houver debounce). Se escolhi «sem testes», enumera os casos a verificar à mão.
6. Limitações: o que o hook não faz (cache, novas tentativas, SSR) e quando compensaria uma biblioteca como TanStack Query.

Restrições:
- Respeita as regras dos hooks e não uses useEffect para derivar estado que pode ser calculado durante o render.
- Não inventes endpoints nem campos fora de {{contrato_dados}}; usa [PREENCHER] onde faltar informação.
- Comentários apenas quando o motivo não for evidente.

Formato: secções com títulos e um bloco de código por ficheiro, com o respetivo nome.

Como utilizar

Exemplo de utilização

Exemplo de resultado

import { useEffect, useState } from 'react';

export type Produto = { id: string; nome: string }; // [PREENCHER: campos reais]
type Estado = { items: Produto[]; 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/produtos?q=${encodeURIComponent(q)}`, { signal: controller.signal });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data: { items: Produto[]; 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;
}

Dados-chave

Categoria

Programação e desenvolvimento · React

Tipo de resultado

Código

Nível

Intermédio

Pensado para

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificado em

Pendente de verificação editorial

Variáveis

O que o hook deve fazer, Contrato de dados ou API, Stack e Testes

Idioma

Português

Preço

Gratuito, sem registo

Atualizado

07/11/2026

Perguntas frequentes