`useThrottle`

Two related utilities for throttling — emitting at most once per delay ms. Use them for derived state from high-frequency events (scroll, mousemove, drag) where you want regular sampling rather than waiting for inactivity.

useThrottle(value, delay) — throttles a value.
useThrottledCallback(callback, delay) — returns a stable, throttled callback that fires on the leading edge; trailing calls within the delay window are dropped.

Throttling a value


import { useEffect, useState } from 'react'
import { useThrottle } from '@wire-ui/react'
 
function ScrollIndicator() {
  const [scrollY, setScrollY] = useState(0)
  const throttledScrollY = useThrottle(scrollY, 100)
 
  useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY)
    window.addEventListener('scroll', onScroll)
    return () => window.removeEventListener('scroll', onScroll)
  }, [])
 
  return <p>Scrolled (sampled): {Math.round(throttledScrollY)}</p>
}

Throttling a callback


import { useThrottledCallback } from '@wire-ui/react'
 
function MouseTracker() {
  const trackPointer = useThrottledCallback((event: React.MouseEvent) => {
    analytics.track('pointermove', { x: event.clientX, y: event.clientY })
  }, 200)
 
  return <div onMouseMove={trackPointer} />
}

Parameters

`useThrottle`

Param	Type	Description
`value`	`T`	Value to throttle.
`delay`	`number`	Minimum milliseconds between emissions.

`useThrottledCallback`

Param	Type	Description
`callback`	`(...args) => void`	Function to throttle.
`delay`	`number`	Minimum milliseconds between invocations.