title: Throttle function (lodash inspired) to handle resize event using React hooks only (with Sandbox)
body: <p>Sorry for the long question, but I needed to make an introduction in order to make it clearer.</p>
  
  <p>I was in need of some code to toggle between my Headers components <code>&lt;HeaderDesktop&gt;</code> and <code>&lt;MobileHeader&gt;</code>.</p>
  
  <p>At first I was using CSS media queries to toggle between them using <code>display: block | none;</code>. This is less then ideal, since both components will be rendered at the same time, which is inneficient and could bring problems in advertisement displays on hidden elements.</p>
  
  <p>Someone here on SO suggested that I could use <code>window.innerWidth</code> and use React to determine which component to render based on that. That is much better indeed. Now only 1 component gets rendered at a time. This is what I did:</p>
  
  <pre><code>// INSIDE HEADER COMPONENT
  return(
    &lt;HeaderWrapper&gt;
     {window.innerWidth &lt; 1200 ?
        &lt;HeaderMobile/&gt;
      : &lt;HeaderDesktop/&gt;
     }
    &lt;/HeaderWrapper&gt;
  );
  </code></pre>
  
  <p>But I needed a way to handle resize events. So I did:</p>
  
  <pre><code>// INSIDE HEADER COMPONENT
  const [windowSize, setWindowSize] = useState(window.innerWidth);
  
  function handleResize() {
    setWindowSize(window.innerWidth);
  }
  
  return(
    &lt;HeaderWrapper&gt;
     {windowSize &lt; 1200 ?
        &lt;HeaderMobile/&gt;
      : &lt;HeaderDesktop/&gt;
     }
    &lt;/HeaderWrapper&gt;
  );
  </code></pre>
  
  <p>Nice! That works, but now my component renders 1 trillion times a second every time a resize is happening. That's no good for performance.</p>
  
  <p>So I've done my research and found out about <strong>lodash</strong> <code>throttle</code> and <code>debounce</code> methods. Both can reduce and control the number of events handled, even when hundreds are fired subsequentely.</p>
  
  <p><a href="https://css-tricks.com/debouncing-throttling-explained-examples/" rel="nofollow noreferrer">https://css-tricks.com/debouncing-throttling-explained-examples/</a></p>
  
  <p>But I'm not a fan of bringing entire libraries to my dependency list just to use a simple functionality like that, so I've ended up creating the following effect hook to mimic the <code>throttle</code> functionality on my <code>resize</code> event handler.</p>
  
  <pre><code>// INSIDE HEADER COMPONENT
  
  // Ref to store if there's a resize in progress
  const resizeInProgress = useRef(false);
  
  // State to store window size
  const [windowSize, setWindowSize] = useState(window.innerWidth);
  
  useEffect(() =&gt; {
  
    // This function trigger the resize event handler
    // And updates the ref saying that there's a resize in progress
    // If theres a resize in progress, it doesn't do anything
  
    function handleResize() {
      if (resizeInProgress.current === true) {
        return;
      }
      resizeInProgress.current = true;
      throttled_updateWindowSize();
    }
  
    // This function sets a timeout to update the state with the
    // new window size and when it executes, it resets the
    // resizeInProgress ref to false. You can execute what's the interval
    // You want to handle your resize events, in this case is 1000ms
  
    function throttled_updateWindowSize() {
      setTimeout(() =&gt; {
        console.log("I will be updated!");
        console.log(window.innerWidth);
        setWindowSize(window.innerWidth);
        resizeInProgress.current = false;
      }, 1000);
    }
  
  
    window.addEventListener("resize", handleResize);
    return () =&gt; window.removeEventListener("resize", handleResize);
  }, []);
  
  </code></pre>
  
  <p>You can see this in action in the following Sandbox:</p>
  
  <p><a href="https://codesandbox.io/s/v3o0nmvvl0" rel="nofollow noreferrer">https://codesandbox.io/s/v3o0nmvvl0</a></p>
  
  <p><a href="https://i.stack.imgur.com/VQfwl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VQfwl.png" alt="enter image description here"></a></p>
  
  <p><strong>QUESTION 1</strong></p>
  
  <p>Can you give me any suggestions on how to improve my code for the throttled version of the resize event handler? </p>
  
  <p><strong>QUESTION 2</strong></p>
  
  <p>I'm guessing I'll be needing that functionality in other components. How can I make this easily reusable? Can I make this a custom Hook? I have never created one, so I'm still having some trouble on how to reason about them and what is the proper way to create them. Can you help me to put that into a Custom Hook?</p>
  
  <p>Or would it better to create a Higher Order Component for that?</p>