title: How to slowdown/debounce events handling with react hooks?
body: <p>Handle scroll event will fire to often. What is the way to slowdown/debounce it?
  And if it's possible, i want last event always be fired and not skipped.</p>
  
  <pre><code>  const handleScroll = event =&gt; {
      //how to debounse scroll change?
      //if you will just setValue here, it's will lag as hell on scroll
    }
  
  
    useEffect(() =&gt; {
      window.addEventListener('scroll', handleScroll)
  
      return () =&gt; {
        window.removeEventListener('scroll', handleScroll)
      }
    }, [])
  </code></pre>
  
  <p>Here is the useDebounce hook example from <a href="https://github.com/xnimorz/use-debounce" rel="noreferrer">xnimorz</a></p>
  
  <pre><code>import { useState, useEffect } from 'react'
  
  export const useDebounce = (value, delay) =&gt; {
    const [debouncedValue, setDebouncedValue] = useState(value)
  
    useEffect(
      () =&gt; {
        const handler = setTimeout(() =&gt; {
          setDebouncedValue(value)
        }, delay)
  
        return () =&gt; {
          clearTimeout(handler)
        }
      },
      [value, delay]
    )
  
    return debouncedValue
  }
  </code></pre>