@nicer-toolbox/use-debounce

debounce a usestate value

Usage no npm install needed!

<script type="module">
  import nicerToolboxUseDebounce from 'https://cdn.skypack.dev/@nicer-toolbox/use-debounce';
</script>

README

Nicer Toolbox

Use Debounce

Debounce a react useState value

NPM JavaScript Style Guide

Usage

function App() {
  const [count, setCount] = useState(0)
  const delayedValue = useDebounce(value, 3000)

  return (
    <div className='App'>
      <h1>Counter</h1>
      <p>Current count: {value}</p>
      <p>Debounce count: {delayedValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}