Como aplicar debounce em input de busca sem lodash
Dante J. Anjos
Posted on February 10, 2023
Campo de busca é um componente muito comum em aplicações, geralmente seguem o mesmo fluxo:
- Usuário digita um texto no campo
- Em seguida é disparado um GET request para alguma API
- E por fim a lista de resultados é renderizada em tela
O problema aqui é no segundo passo, onde seria um desperdício de recurso do servidor, fazer uma busca a cada letra digitada, aí que entra a estratégia chamada de debounce.
A idéia é aplicar um delay, antes de fazer a chamada à API, assim evitando chamadas desnecessárias.
Uma solução muito utilizada é o pacote lodash debounce, mas para a finalidade descrita acima a implementação é muito simples usando um setTimeout. O importante é criar uma referência ao timeout antes, para poder reiniciar o delay, pois caso o usuário insira uma nova busca antes da anterior terminar, o timeout continua em execução, então buscas desnecessárias são feitas do mesmo jeito.
const DEBOUNCE_DELAY = 500;
let timeoutRef; // cria a referência ao timeout
const someFetchFunction = (value) => {
clearTimeout(timeoutRef); // reinicia o timeout
timeoutRef = setTimeout(() => {
// faz a chamada à API e outros códigos após o delay
}, DEBOUNCE_DELAY)
}
Apenas isso já é suficiente para que o debounce funcione sem erros. A função pode ser chamada no campo de input, passando o valor digitado no campo de busca.
Posted on February 10, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.