Crie seu próprio hook de debounce

Nesse post irei mostrar como criar um hook simples de debouce, sem enrolação. Utilizando ReactJS claro!! =)

Primeiro crie uma pasta onde irar ficar seu hook

Path = "/src/hooks/useDebounce"

Após isso vamos criar uma função recebendo um parâmetro, que no caso seria a função que sera chamada no debounce:

export const useDebounce = (
  effect,
) => {}

Porém, para um debounce ficar funcional e necessário de que passemos um delay também, então vamos adicionar o delay nos parâmetros também!

export const useDebounce = (
  effect,
  delay,
) => {}

Como vamos utilizar como hook, vamos aproveitar e utilizar das maravilhas no React nê, vamos adicionar um useEffect para nos ajudar com esse processo de chamar a função, e aproveitar e passar também como parâmetro as dependências que o useEffect vai precisar

import React from 'react'

export const useDebouncedEffect = (
  effect,
  delay,
  deps
) => {
  React.useEffect(() => {
  }, deps)
}

Vamos começar a melhorar nosso useEffect, adicionando um timeout e colocar a nossa função de efeito que sera chamada após o tempo do timeout, e limpando o timeout quando a acontecer a retirada do efeito

export const useDebouncedEffect = (
  effect,
  delay,
  deps
) => {
  useEffect(() => {
    const handler = setTimeout(() => effect(), delay)

    return () => clearTimeout(handler)
  }, [...deps, delay])
}

Pronto, agora seu código está completo.
Para quem usa Typescript vou deixar um código a baixo com as tipagens e também com alguns detalhes importantes!

import { DependencyList, EffectCallback, useEffect } from 'react'

export const useDebouncedEffect = (
  effect: EffectCallback,
  delay: number,
  deps?: DependencyList
) => {
  useEffect(() => {
    const handler = setTimeout(() => effect(), delay)

    return () => clearTimeout(handler)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [...(deps || []), delay])
}

Observe que as dependências ficaram opcional, mas também tratamos no useEffect.