Evite requisições desnecessárias com debounce em JavaScript

Você já digitou algo em um campo de busca e, a cada letra digitada, uma nova requisição era feita para a API?

Isso é ineficiente.

A solução? debounce()

📌 O que é debounce?

É uma técnica usada para adiar a execução de uma função até que um tempo específico tenha passado sem novas chamadas.

É muito usado em:

• buscas dinâmicas (auto-complete)
• eventos de rolagem (scroll)
• eventos de resize

⚙️ Exemplo prático:

Imagine um campo de busca que chama a API a cada tecla:

function search(term) {
  fetch(`https://api.exemplo.com/search?q=${term}`)
    .then(res => res.json())
    .then(console.log);
}

input.addEventListener("input", (e) => {
  search(e.target.value);
});

Isso gera chamadas demais.

Agora, com debounce:

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const debouncedSearch = debounce(search, 500);

input.addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
});

Agora só é chamada a API depois que o usuário parar de digitar por 500ms.

🛠️ Dica bônus: usando com React

No React, pode usar com useCallback ou bibliotecas como lodash.debounce:

import debounce from 'lodash.debounce';

const debounced = useCallback(
  debounce((value) => {
    // chamada de API aqui
  }, 300),
  []
);

💬 Já usou debounce em algum projeto?

Conta aqui nos comentários como implementou 👇
Ou salva esse post pra usar depois! 🔖