Debounce en Next.js

React v16.8 introdujo un nuevo hook llamado useEffect, que te permite ejecutar efectos secundarios en tus componentes funcionales. useEffect es una excelente manera de manejar operaciones costosas como las llamadas a la API, pero puede requerir algo de trabajo. En esta publicación, te mostraré cómo usar useEffect para deshacer el efecto de las operaciones costosas en Next.js.

¿Qué es el deshacer el efecto (debouncing)?

Deshacer el efecto es una técnica para controlar la frecuencia con la que se llama a una función. Es útil cuando tienes una operación costosa que solo quieres ejecutar cuando el usuario ha dejado de escribir, por ejemplo. En este caso, puedes deshacer el efecto de la llamada a la API para que solo se realice cuando el usuario haya dejado de escribir durante un cierto tiempo.

useEffect

useEffect es un hook que te permite ejecutar efectos secundarios en tus componentes funcionales. Es similar a componentDidMount y componentDidUpdate en los componentes de clase. El primer argumento es una función que se llama cuando el componente se monta o actualiza. El segundo argumento es un array de dependencias. Si las dependencias cambian, el procedimiento se llamará de nuevo. Si el array está vacío, la función solo se llamará cuando el componente se monte.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Esto se llamará cuando el componente se monte')
  }, [])

  useEffect(() => {
    console.log('Esto se llamará cuando el componente se monte y cuando las dependencias cambien')
  }, [dependency1, dependency2])

  return <div>Hola mundo</div>
}

Cómo deshacer el efecto en Next.js

Lo primero que necesitas hacer es crear un hook personalizado que maneje el deshacer el efecto. Aquí tienes un ejemplo sencillo:

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 toma dos argumentos: el valor a deshacer el efecto y el retraso en milisegundos. Devuelve el valor deshecho el efecto. El hook usa useEffect para establecer un tiempo de espera que actualizará el valor deshecho el efecto después del retraso especificado. También produce una función de limpieza que aclara el tiempo de espera si el valor o la incertidumbre cambian.

Ahora que tenemos un hook que puede deshacer el efecto de los valores, podemos usarlo para deshacer el efecto de las llamadas a la API. Aquí tienes un ejemplo:

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 hará una llamada a la API a /api/search cada vez que el usuario deje de escribir durante 500 milisegundos. El deshacer el efecto hará la llamada a la API con el valor del campo de entrada como la cadena de consulta.

Rendimiento

Deshacer el efecto es una forma barata de manejar operaciones costosas en Next.js. Es más barato que usar una biblioteca como lodash.debounce porque no requiere ninguna dependencia adicional. También es más asequible que usar una biblioteca como react-throttle porque no requiere ningún código adicional para ser incluido.

Conclusión

Deshacer el efecto es una técnica valiosa para controlar la frecuencia con la que se llama a una función. Es útil cuando tienes una operación costosa que solo quieres ejecutar cuando el usuario ha dejado de escribir. En esta publicación, te mostré cómo usar useEffect para deshacer el efecto de las operaciones costosas en Next.js.

Si te gustó esta publicación, también te puede interesar JavaScript Hashmap, Performant and Simple.