useDebouncedCallback

useDebouncedCallback es un Hook de React que devuelve una versión con debounce del callback que proporcionas. Te ayuda a optimizar la gestión de eventos al retrasar la ejecución de la función y agrupar varias llamadas en una sola.

Ten en cuenta que, si activas tanto “leading” como “trailing”, la función se ejecutará al inicio y al final del período de espera. Sin embargo, para que esto ocurra, debes llamarla al menos dos veces dentro del intervalo debounceMs, ya que una sola llamada a la función con debounce no puede provocar dos ejecuciones.

Interfaz

function useDebouncedCallback<T>(options: Object): (nextValue: T) => void;

Parámetros

• optionsrequired · Object
  

  El objeto de opciones.

  • options.onChangerequired · (newValue: T) => void
    

    El callback al que quieres aplicar debounce. Las llamadas con el mismo valor que el último enviado se omiten.

  • options.timeThresholdrequired · number
    

    El número de milisegundos que debe retrasarse la ejecución de la función.

  • options.leadingboolean · false
    

    Si es true, la función se ejecuta al inicio de la secuencia.

  • options.trailingboolean · true
    

    Si es true, la función se ejecuta al final de la secuencia.

Valor de retorno

• (nextValue: T) => void
  

  Una función con debounce que envía el valor a onChange.

Ejemplo

import { useDebouncedCallback } from 'react-simplikit';
import { useState } from 'react';

function SearchInput() {
  const [query, setQuery] = useState('');
  const setQueryDebounced = useDebouncedCallback({
    onChange: setQuery,
    timeThreshold: 300,
  });

  return (
    <>
      <input onChange={e => setQueryDebounced(e.target.value)} />
      <p>Buscando: {query}</p>
    </>
  );
}