useThrottle

Throttle fast-changing state

Usage

import { useThrottle } from '@hookit/throttle';
 
export const Component = () => {
  const [state, setState] = React.useState('');
  const throttledValue = useThrottle(state, 1000);
 
  return (
    <>
      <input onChange={(e) => setState(e.target.value)} type='text' />
 
      {/* updates immediately */}
      <p>State: {state}</p>
 
      {/* updates every second */}
      <p>throttled Value: {throttledValue}</p>
    </>
  );
};

Arguments

Name	Type	Required?
value	`any`	✅
delay	`number`	✅

Returns

Name	Description	Type
throttledValue	the throttled value from the `value` argument	`any`

useThrottledState

import { useThrottledState } from '@hookit/throttle';
 
export const Component = () => {
  const [state, throttledValue, setState] = useThrottledState('', 1000);
 
  return (
    <>
      <input onChange={(e) => setState(e.target.value)} type='text' />
 
      {/* updates immediately */}
      <p>State: {state}</p>
 
      {/* updates every second */}
      <p>throttled Value: {throttledValue}</p>
    </>
  );
};

Arguments

Name	Type	Required?
value	`any`	✅
delay	`number`	✅

Returns

Index	Name	Description	Type
0	state	current state	`any`
1	throttledValue	throttled value from state	`any`
2	setState	sets new state	`(prevState: any) => any`

useSarcasm useToggle