title: React hooks - Set a timeout inside useEffect but be able to clear it from a mouse event?
body: <p>This is a classic menu case, open on a button click, hide in 5 seconds if no activity. We have 2 state variables. open and active, corresponding to two different states = menu is open, and active (being used). I set the open variable using a button click, then in effect I start the 5 second timeout. Now if the user mouseovers the menu,I set the active property to true and try to clear the timeout. But that is not working. Meaning, the timeout var is always null inside the code that is supposed to clear it.</p>
  <p>Here is some code to help you understand:</p>
  <pre><code>let [open, openMenu] = useState(false)
  let [active, activateMenu] = useState(false)
  
  let timer = null;
  useEffect(() =&gt; {
      if(open &amp;&amp; !active) {
          timer = setTimeout(() =&gt; setOpen(false), 5000)
      }
  
      if(open &amp;&amp; active) {
          if(timer) {
              clearTimeout(timer)
          }
      }
  }, [open, active])
  
  // Triggered via the UI on a button click
  openMenuhandler() {
      setOpen(true)
  }
  
  // Triggered via the UI on mouseenter
  // identifies that the menu is being used, when mouse is over it
  setMenuActive() {
      activateMenu(true)
  }
  
  // Triggered via the UI on mouseleave
  setMenuInActive() {
      activateMenu(false)
  }
  
  // other code here on
  </code></pre>
  <p>Now the timeout is never cleared. The menu hides in 5 seconds, no matter what. Is there another way to do it? I have even tried moving the clearTimeout to the mouseLeave, but even then the timer is null. How to fix this? Please help.</p>