useThrottle

useThrottle es un Hook de React que crea una versión de un callback con una frecuencia de ejecución limitada. Te permite limitar la frecuencia con la que llamas a una función, por ejemplo, al manejar eventos de desplazamiento o de cambio de tamaño.

Interfaz

function useThrottle<F extends (...args: any[]) => any>(
  callback: F,
  wait: number,
  options?: { edges?: Array<'leading' | 'trailing'> }
): F & { cancel: () => void };

Parámetros

• callbackrequired · F
  

  La función cuya frecuencia de ejecución quieres limitar.

• waitrequired · number
  

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

• options{ edges?: Array<'leading' | 'trailing'> }
  

  Opciones para controlar la limitación de frecuencia.

  • 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

• F & { cancel: () => void }
  

  Devuelve la función con frecuencia limitada y un método cancel para cancelar las ejecuciones pendientes.

Ejemplo

const throttledScroll = useThrottle(
  () => {
    console.log('Evento de desplazamiento');
  },
  200,
  { edges: ['leading', 'trailing'] }
);

useEffect(() => {
  window.addEventListener('scroll', throttledScroll);
  return () => {
    window.removeEventListener('scroll', throttledScroll);
    throttledScroll.cancel();
  };
}, [throttledScroll]);