useThrottledValue
Function: useThrottledValue()
function useThrottledValue<TValue>(value, options): [TValue, Throttler<Dispatch<SetStateAction<TValue>>>]
function useThrottledValue<TValue>(value, options): [TValue, Throttler<Dispatch<SetStateAction<TValue>>>]
Defined in: react-pacer/src/throttler/useThrottledValue.ts:32
A high-level React hook that creates a throttled version of a value that updates at most once within a specified time window. This hook uses React's useState internally to manage the throttled state.
Throttling ensures the value updates occur at a controlled rate regardless of how frequently the input value changes. This is useful for rate-limiting expensive re-renders or API calls that depend on rapidly changing values.
The hook returns a tuple containing:
- The throttled value that updates according to the leading/trailing edge behavior specified in the options
- The throttler instance with control methods
For more direct control over throttling behavior without React state management, consider using the lower-level useThrottler hook instead.
Type Parameters
• TValue
Parameters
value
TValue
options
ThrottlerOptions<Dispatch<SetStateAction<TValue>>>
Returns
[TValue, Throttler<Dispatch<SetStateAction<TValue>>>]
Example
// Basic throttling - update at most once per second
const [throttledValue, throttler] = useThrottledValue(rawValue, { wait: 1000 });
// With custom leading/trailing behavior
const [throttledValue, throttler] = useThrottledValue(rawValue, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
// Basic throttling - update at most once per second
const [throttledValue, throttler] = useThrottledValue(rawValue, { wait: 1000 });
// With custom leading/trailing behavior
const [throttledValue, throttler] = useThrottledValue(rawValue, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.