Como aplicar debounce em input de busca sem lodash

Campo de busca é um componente muito comum em aplicações, geralmente seguem o mesmo fluxo:

1. Usuário digita um texto no campo
2. Em seguida é disparado um GET request para alguma API
3. 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.