function useThrottledState<TValue>(value, options): readonly [TValue, (...args) => void, {
cancel: () => void;
getExecutionCount: () => number;
maybeExecute: (...args) => void;
}]
function useThrottledState<TValue>(value, options): readonly [TValue, (...args) => void, {
cancel: () => void;
getExecutionCount: () => number;
maybeExecute: (...args) => void;
}]
Defined in: react-pacer/src/throttler/useThrottledState.ts:40
A React hook that creates a throttled state value that updates at most once within a specified time window. This hook combines React's useState with throttling functionality to provide controlled state updates.
Throttling ensures state updates occur at a controlled rate regardless of how frequently the setter is called. This is useful for rate-limiting expensive re-renders or operations that depend on rapidly changing state.
The hook returns a tuple containing:
For more direct control over throttling without state management, consider using the lower-level useThrottler hook instead.
• TValue
TValue
ThrottlerOptions
readonly [TValue, (...args) => void, { cancel: () => void; getExecutionCount: () => number; maybeExecute: (...args) => void; }]
// Basic throttling - update state at most once per second
const [value, setValue, throttler] = useThrottledState(0, { wait: 1000 });
// With custom leading/trailing behavior
const [value, setValue] = useThrottledState(0, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
// Access throttler methods if needed
const handleReset = () => {
setValue(0);
throttler.cancel(); // Cancel any pending updates
};
// Basic throttling - update state at most once per second
const [value, setValue, throttler] = useThrottledState(0, { wait: 1000 });
// With custom leading/trailing behavior
const [value, setValue] = useThrottledState(0, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
// Access throttler methods if needed
const handleReset = () => {
setValue(0);
throttler.cancel(); // Cancel any pending updates
};
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.