title: Debounce / Throttle onChange event in useEffect
body: <p>How can I debounce / throttle the function that gets called by scrollY.onChange()?</p>
  <p>Lodash could be used I guess.</p>
  <p>This is my custom hook to check if the user scrolls up or down:</p>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  import { useViewportScroll } from &quot;framer-motion&quot;;
  
  const scrollScreen = () =&gt; {
  const { scrollY } = useViewportScroll();
  
  const [hidden, setHidden] = useState(false);
  
  function update() {
   if (scrollY?.current &lt; scrollY?.prev) {
     console.log(&quot;SHOW&quot;);
     setHidden(false);
     } else if (scrollY?.current &gt; 100 &amp;&amp; scrollY?.current &gt; scrollY?.prev) {
     setHidden(true);
   }
  }
  
   useEffect(() =&gt; {
  return scrollY.onChange(() =&gt; update());
   });
  
  return [hidden, setHidden];
    };
  
  export default scrollScreen;
  </code></pre>