Como aplicar debounce em pesquisa no Angular

Reduza chamadas desnecessárias à API enquanto o usuário digita usando RxJS, debounceTime e distinctUntilChanged.

Por que usar debounce?

Sem debounce, cada tecla pode disparar uma requisição. Com debounceTime, você espera o usuário parar de digitar por alguns milissegundos antes de pesquisar.

Exemplo com Subject

private pesquisa$ = new Subject<string>();

ngOnInit(): void {
  this.pesquisa$
    .pipe(
      debounceTime(400),
      distinctUntilChanged()
    )
    .subscribe(valor => {
      this.buscar(valor);
    });
}

pesquisar(valor: string): void {
  this.pesquisa$.next(valor.trim());
}

Com chamada HTTP

Quando a busca dispara HTTP, switchMap é útil porque descarta a resposta da pesquisa anterior quando chega um novo termo.

this.pesquisa$
  .pipe(
    debounceTime(400),
    distinctUntilChanged(),
    switchMap(valor => this.service.buscar(valor))
  )
  .subscribe(resultado => {
    this.itens = resultado;
  });

Qual tempo usar?

Evite que uma resposta antiga substitua a pesquisa atual

O debounceTime reduz a quantidade de chamadas, mas não resolve sozinho a concorrência entre requisições. Veja também Como cancelar requisições HTTP anteriores com switchMap no Angular.

Debounce, paginação e loading no mesmo fluxo

Veja também Como fazer pesquisa com debounce, switchMap, loading e paginação no Angular, com termo e página coordenados em um único estado RxJS.