title: Problems with debounce in useEffect
body: <p>I have a form with username input and I am trying to verify if the username is in use or not in a debounce function. The issue I'm having is that my debounce doesn't seem to be working as when I type "user" my console looks like</p>
  
  <pre><code>u
  us
  use
  user
  </code></pre>
  
  <p>Here is my debounce function</p>
  
  <pre><code>export function debounce(func, wait, immediate) {
      var timeout;
  
      return () =&gt; {
          var context = this, args = arguments;
  
          var later = () =&gt; {
              timeout = null;
              if (!immediate) func.apply(context, args);
          };
  
          var callNow = immediate &amp;&amp; !timeout;
  
          clearTimeout(timeout);
  
          timeout = setTimeout(later, wait);
  
          if (callNow) func.apply(context, args);
      };
  };
  </code></pre>
  
  <p>And here is how I'm calling it in my React component</p>
  
  <pre><code>import React, { useEffect } from 'react' 
  
  // verify username
  useEffect(() =&gt; {
      if(state.username !== "") {
          verify();
      }
  }, [state.username])
  
  const verify = debounce(() =&gt; {
      console.log(state.username)
  }, 1000);
  </code></pre>
  
  <p>The debounce function seems to be correct? Is there a problem with how I am calling it in react?</p>