packages
useDebounce

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


NameTypeRequired?
valueany
delaynumber

Returns


NameDescriptionType
debouncedValuethe debounced value from the value argumentany

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


NameTypeRequired?
valueany
delaynumber

Returns


IndexNameDescriptionType
0statecurrent stateany
1debouncedValuedebounced value from stateany
2setStatesets new state(prevState: any) => any