O usuário digita "ca" e logo depois "café". A resposta da primeira busca pode chegar por último e sobrescrever a lista atual. Cancele a busca anterior ao iniciar a próxima e confirme que só o resultado da requisição atual altera a tela.

Timeout e cancelamento manual

Em ambientes que oferecem AbortSignal.timeout(), passe o sinal diretamente ao fetch. Para cancelamento manual, crie um AbortController e chame abort() ao substituir a requisição ou desmontar a tela. Um sinal abortado permanece nesse estado. Use um controlador novo para cada operação.

const response = await fetch("/api/status", {
  signal: AbortSignal.timeout(5_000),
})
if (!response.ok) throw new Error(`HTTP ${response.status}`)
const status = await response.json()

Mantenha a leitura do corpo dentro do mesmo tratamento de erro. A conexão pode ser interrompida depois que os cabeçalhos chegaram. Em uma busca substituída, o cancelamento costuma dispensar uma mensagem na tela. Um timeout na busca atual pode justificar um botão de tentar novamente. Para uma escrita, confirme o resultado antes de reenviar, porque o servidor pode ter concluído a operação.

Documentação de referência · Como validar JSON externo com unknown no TypeScript