Sugestões assíncronas com debounce

Em vez de filtrar uma matriz local, chame um ponto de acesso da API que retorne sugestões correspondentes com base na consulta. A chamada à API fica em um useEffect que depende do valor de entrada com atraso. Isso transfere a responsabilidade pela filtragem para o servidor, permitindo correspondência aproximada, classificação e sugestões de um conjunto de dados muito maior.

Adicione duas novas variáveis de estado ao preenchimento automático: isLoading (booleano) para exibir um indicador enquanto a busca estiver em andamento e error (cadeia de caracteres ou nulo) para exibir uma mensagem de erro quando a busca falhar. Isso fornece informações sobre a operação assíncrona, em vez de deixar os usuários se perguntando por que as sugestões não aparecem.

No useEffect de busca, defina setIsLoading(true) e setError(null) no início; depois, chame fetch(url), analise o JSON, chame setSuggestions(data) e, por fim, defina setIsLoading(false) em um bloco de finalização ou depois dos caminhos de sucesso e erro. A matriz de dependências do efeito contém apenas debouncedInputValue.

Crie um novo AbortController no início do efeito e passe controller.signal para as opções da busca. Na função de limpeza, chame controller.abort(). Quando o usuário digita e o valor com atraso muda, a busca anterior é cancelada antes que a nova comece, impedindo que resultados obsoletos cheguem fora de ordem.

Quando uma busca é cancelada, ela é rejeitada com uma DOMException cujo nome é AbortError. No bloco de captura, verifique if (err.name === 'AbortError') return; para ignorar silenciosamente as buscas canceladas. Trate somente erros reais de rede ou erros da API que devem ser mostrados ao usuário.

Defina isLoading como true antes da busca e como false depois que ela for resolvida ou rejeitada. Use um bloco de finalização para garantir que ele seja sempre redefinido: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). Sem o bloco de finalização, um erro da busca deixaria o indicador em execução para sempre.

Quando isLoading for verdadeiro e a entrada contiver texto, mostre a lista suspensa com um indicador centralizado dentro dela, em vez da lista de sugestões. Isso informa ao usuário que os resultados estão a caminho. Quando o carregamento for falso e as sugestões tiverem chegado, substitua o indicador pelos itens reais de sugestão.

Quando error não for nulo, mostre a lista suspensa com a mensagem de erro em vez das sugestões. Uma mensagem como "Não foi possível carregar as sugestões. Tente novamente." é mais amigável do que uma cadeia de erro bruta. Opcionalmente, adicione um botão de nova tentativa que dispare a busca manualmente.

Evite fazer buscas para cadeias vazias ou consultas muito curtas que produzam resultados irrelevantes demais. Faça essa verificação no início do efeito: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. Isso reduz chamadas desnecessárias à API e impede uma lista excessiva de resultados a partir de um único caractere.

Armazene os resultados obtidos em um Map dentro de uma useRef: const cache = useRef(new Map()). Antes de fazer a busca, verifique if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }. Depois de uma busca bem-sucedida, armazene o resultado. Isso elimina requisições de rede redundantes para consultas que o usuário já digitou.

Para o preenchimento automático especificamente, um atraso de 200 a 300 ms é o ponto ideal. Atrasos menores (inferiores a 200 ms) disparam solicitações demais para pessoas que digitam rápido. Atrasos maiores (superiores a 400 ms) fazem as sugestões parecerem lentas e sem resposta. 250 ms é um padrão usado com frequência em implementações de preenchimento automático em produção.

Por que AbortController é importante em um preenchimento automático com atraso que faz buscas em uma API?

Substitua a filtragem estática por uma busca na API dentro de um useEffect que dependa do valor com atraso. Use AbortController para cancelar requisições obsoletas. Adicione o estado isLoading e error para fornecer informações ao usuário. Defina um limite mínimo de caracteres para evitar chamadas excessivas. Armazene os resultados em uma referência para ignorar requisições de rede redundantes.