React v16.8 introduziu um novo hook chamado useEffect, que permite executar efeitos colaterais em seus componentes funcionais. useEffect é uma ótima maneira de lidar com operações caras como chamadas de API, mas pode exigir algum trabalho. Neste artigo, mostrarei como usar useEffect para debater procedimentos caros em Next.js.

O que é debouncing?

Debouncing é uma técnica para controlar a taxa na qual uma função é chamada. É útil quando você tem uma operação cara que deseja executar apenas quando o usuário parou de digitar, por exemplo. Nesse caso, você pode debater a chamada da API para que ela seja feita apenas quando o usuário parar de digitar por um determinado período de tempo.

useEffect

useEffect é um hook que permite executar efeitos colaterais em seus componentes funcionais. É semelhante a componentDidMount e componentDidUpdate em componentes de classe. O primeiro argumento é uma função chamada quando o componente é montado ou atualizado. O segundo argumento é um array de dependências. Se as dependências mudarem, o procedimento será chamado novamente. Se o array estiver vazio, a função será chamada apenas quando o componente for montado.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Isso será chamado quando o componente for montado')
  }, [])

  useEffect(() => {
    console.log('Isso será chamado quando o componente for montado e quando as dependências mudarem')
  }, [dependency1, dependency2])

  return <div>Olá mundo</div>
}

Como debater em Next.js

A primeira coisa que você precisa fazer é criar um hook personalizado que lidará com o debouncing. Aqui está um exemplo simples:

import { useState, useEffect } from 'react'

export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => {
      clearTimeout(handler)
    }
  }, [value, delay])

  return debouncedValue
}

Este hook recebe dois argumentos: o valor a ser debatido e o atraso em milissegundos. Ele retorna o valor debatido. O hook usa useEffect para definir um timeout que atualizará o valor debatido após o atraso especificado. Ele também produz uma função de limpeza que limpa o timeout se o valor ou a incerteza mudar.

Agora que temos um hook que pode debater valores, podemos usá-lo para debater chamadas de API. Aqui está um exemplo:

import useDebounce from './useDebounce'

export default function Search() {
  const [search, setSearch] = useState('')
  const debouncedSearch = useDebounce(search, 500)

  useEffect(() => {
    if (debouncedSearch) {
      fetch(`/api/search?q=${debouncedSearch}`)
    }
  }, [debouncedSearch])

  return <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} />
}

Este componente fará uma chamada de API para /api/search sempre que o usuário parar de digitar por 500 milissegundos. O debounce fará a chamada de API com o valor do campo de entrada como a string de consulta.

Desempenho

Debouncing é uma maneira barata de lidar com operações caras em Next.js. É mais barato do que usar uma biblioteca como lodash.debounce porque não requer nenhuma dependência extra. Também é mais acessível do que usar uma biblioteca como react-throttle porque não requer nenhum código adicional a ser empacotado.

Conclusão

Debouncing é uma técnica valiosa para controlar a taxa na qual uma função é chamada. É útil quando você tem uma operação cara que deseja executar apenas quando o usuário parou de digitar. Neste artigo, mostrei como usar useEffect para debater operações caras em Next.js.

Se você gostou deste artigo, você também pode gostar de JavaScript Hashmap, Performant and Simple.