useThrottledCallback

useThrottledCallback es un Hook de React que devuelve una versión del callback proporcionado con una frecuencia de ejecución limitada. El callback se ejecuta como máximo una vez por intervalo especificado.

Interfaz

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

Parámetros

• optionsrequired · Object
  

  El objeto de opciones.

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

    El callback cuya frecuencia de ejecución quieres limitar. El Hook omite las llamadas con el mismo valor que el último que transmitió.

  • options.timeThresholdrequired · number
    

    El intervalo en milisegundos que limita la frecuencia de las llamadas.

  • options.edgesArray<'leading' | 'trailing'> · ['leading', 'trailing']
    

    Un arreglo opcional que especifica si la función debe ejecutarse al inicio del intervalo, al final o en ambos momentos.

Valor de retorno

• (nextValue: T) => void
  

  Una función con frecuencia limitada que transmite el valor a onChange como máximo una vez por intervalo.

Ejemplo

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

function ScrollPosition() {
  const [scrollTop, setScrollTop] = useState(0);
  const setScrollTopThrottled = useThrottledCallback({
    onChange: setScrollTop,
    timeThreshold: 200,
  });

  return (
    <div onScroll={e => setScrollTopThrottled(e.currentTarget.scrollTop)}>
      <p>Desplazamiento: {scrollTop}px</p>
    </div>
  );
}