useDebounce

Debounce fast-changing state

Usage

import { useDebounce } from '@hookit/debounce';
 
export const Component = () => {
  const [state, setState] = React.useState('');
  const debouncedValue = useDebounce(state, 1000);
 
  return (
    <>
      <input onChange={(e) => setState(e.target.value)} type='text' />
 
      {/* updates immediately */}
      <p>State: {state}</p>
 
      {/* updates 1s later */}
      <p>Debounced Value: {debouncedValue}</p>
    </>
  );
};

Arguments

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

Returns

Name	Description	Type
debouncedValue	the debounced value from the `value` argument	`any`

useDebouncedState

import { useDebouncedState } from '@hookit/debounce';
 
export const Component = () => {
  const [state, debouncedValue, setState] = useDebouncedState('', 1000);
 
  return (
    <>
      <input onChange={(e) => setState(e.target.value)} type='text' />
 
      {/* updates immediately */}
      <p>State: {state}</p>
 
      {/* updates 1s later */}
      <p>Debounced Value: {debouncedValue}</p>
    </>
  );
};

Arguments

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

Returns

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

Introduction useElementEventListener