useThrottledValue

useThrottledValue es un Hook de React que devuelve una copia del valor dado con una frecuencia de actualización limitada. Tú mantienes el control del estado; el valor devuelto refleja sus cambios como máximo una vez cada wait milisegundos. Esto te permite limitar los renderizados costosos que dependen de la posición de desplazamiento, la posición del puntero o el tamaño de un elemento cuando cambia.

En el primer renderizado y en el servidor, el Hook devuelve el valor tal cual. Nunca programa un cambio al montar el componente, por lo que aplica inmediatamente el primer cambio posterior al montaje cuando leading es true. Si tanto leading como trailing son false, el valor devuelto nunca se actualiza.

El Hook compara el valor por referencia. Si pasas un objeto o arreglo nuevo en cada renderizado, el valor devuelto sigue actualizándose cada wait milisegundos; primero estabiliza la referencia, por ejemplo, con usePreservedReference.

Interfaz

function useThrottledValue<T>(
  value: T,
  wait: number,
  options?: ThrottleOptions
): T;

Parámetros

• valuerequired · T
  

  El valor cuya frecuencia de actualización quieres limitar.

• waitrequired · number
  

  La duración del intervalo de limitación de frecuencia, en milisegundos.

• optionsThrottleOptions
  

  Opciones para configurar la limitación de frecuencia.

  • options.leadingboolean · true
    

    Si es true, el Hook aplica inmediatamente el primer cambio de cada intervalo.

  • options.trailingboolean · true
    

    Si es true, el Hook aplica el último cambio de un intervalo wait milisegundos después de ese cambio.

Valor de retorno

• T
  

  El valor con frecuencia de actualización limitada.

Ejemplo

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

function ScrollProgress() {
  const [scrollY, setScrollY] = useState(0);
  const throttledScrollY = useThrottledValue(scrollY, 100);

  return (
    <div onScroll={e => setScrollY(e.currentTarget.scrollTop)}>
      <ProgressBar position={throttledScrollY} />
    </div>
  );
}