Menu

gitpiper

useDebounce react Code Snippet in 2024

hooksstateeffectintermediate

Last Updated: 18 March 2024

Debounces the given value.

  • Create a custom hook that takes a value and a delay.
  • Use the useState() hook to store the debounced value.
  • Use the useEffect() hook to update the debounced value every time value is updated.
  • Use setTimeout() to create a timeout that delays invoking the setter of the previous state variable by delay ms.
  • Use clearTimeout() to clean up when dismounting the component.
  • This is particularly useful when dealing with user input.
const useDebounce = (value, delay) => { const [debouncedValue, setDebouncedValue] = React.useState(value); React.useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value]); return debouncedValue; };
const Counter = () => { const [value, setValue] = React.useState(0); const lastValue = useDebounce(value, 500); return ( <div> <p> Current: {value} - Debounced: {lastValue} </p> <button onClick={() => setValue(value + 1)}>Increment</button> </div> ); }; ReactDOM.render(<Counter />, document.getElementById('root'));

react snippet similar to useDebounce For You in March 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️