title: React: Proper state mutation with setState hook
body: <p>I am new to React, and basically i want to build a megamenu from scratch. To do this i have event listeners for <code>mouseenter</code> and <code>mouseleave</code> events as well as the <code>useState</code> hook from React.</p>
  <h4>Component implementation so far</h4>
  <pre class="lang-js prettyprint-override"><code>import { useState, useEffect } from &quot;react&quot;;
  import { ArrowSmRightIcon } from &quot;@heroicons/react/solid&quot;;
  
  export default function Navbar({ props }) {
    const { links } = props;
  
    const [className, setclassName] = useState(&quot;bg-white/15 backdrop-blur-lg&quot;);
    const [panelOpen, setpanelOpen] = useState(false);
    const [usingPanel, setusingPanel] = useState(false);
  
    const scrollHandler = (event) =&gt; {
      if (window.scrollY &lt; 30) {
        setclassName(&quot;bg-white/15 backdrop-blur-lg&quot;);
      } else {
        setclassName(&quot;bg-white shadow-md&quot;);
      }
    };
  
    useEffect(() =&gt; {
      window.addEventListener(&quot;scroll&quot;, scrollHandler);
    }, []);
  
    const linkHoverHandler = (e) =&gt; {
      setpanelOpen(true);
    };
  
    const linkExitHandler = (e) =&gt; {
      setTimeout(() =&gt; {
        if (!usingPanel) {
          setpanelOpen(false);
        }
      }, 500);
    };
  
    const panelHoverHandler = (e) =&gt; {
      setusingPanel(true);
    };
  
    const panelExitHandler = (e) =&gt; {
      setusingPanel(false);
      setpanelOpen(false);
    };
  
    return (
      &lt;div className={`w-full  ${className} transition-all sticky top-0`}&gt;
        &lt;div className=&quot;container mx-auto relative&quot;&gt;
          &lt;div className=&quot;flex items-center p-6 gap-6&quot;&gt;
            &lt;img
              className=&quot;h-10 flex-none&quot;
              src=&quot;thumbnail_image001.png&quot;
              alt=&quot;Digital Unity Logo&quot;
            /&gt;
  
            &lt;ul className=&quot;flex flex-1&quot;&gt;
              {links.map((link, index) =&gt; (
                &lt;li
                  key={index}
                  className=&quot;ml-5 hover:cursor-pointer&quot;
                  onMouseEnter={linkHoverHandler}
                  onMouseLeave={linkExitHandler}
                &gt;
                  {link.label}
                &lt;/li&gt;
              ))}
            &lt;/ul&gt;
          &lt;/div&gt;
          {panelOpen &amp;&amp; (
            &lt;div
              onMouseEnter={panelHoverHandler}
              onMouseLeave={panelExitHandler}
              className=&quot;absolute top-[6rem] left-1/2 bg-white w-full -translate-x-1/2 flex items-center rounded-lg&quot;
            &gt;
              &lt;div className=&quot;w-1/2 p-5 rounded-l-lg bg-gray-100 border-solid border-r-2 border-r-gray-200&quot;&gt;
                &lt;div className=&quot;flex&quot;&gt;
                  &lt;div className=&quot;flex-1&quot;&gt;
                    &lt;h5 className=&quot;text-lg text-sky-800 mb-5&quot;&gt;Οι υπηρεσίες&lt;/h5&gt;
  
                    &lt;ul&gt;
                      {[&quot;Η μια&quot;, &quot;Η δυο&quot;, &quot;Η τρια&quot;].map((el, i) =&gt; (
                        &lt;li
                          key={i}
                          className=&quot;mb-2 hover:text-sky-600 hover:cursor-pointer transition-all&quot;
                        &gt;
                          {el}
                        &lt;/li&gt;
                      ))}
                    &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;flex-1&quot;&gt;
                    &lt;h5 className=&quot;text-lg text-sky-800 mb-5&quot;&gt;Οι alles&lt;/h5&gt;
  
                    &lt;ul&gt;
                      {[&quot;Η μια&quot;, &quot;Η δυο&quot;, &quot;Η τρια&quot;].map((el, i) =&gt; (
                        &lt;li
                          key={i}
                          className=&quot;mb-2 hover:text-sky-600 hover:cursor-pointer transition-all&quot;
                        &gt;
                          {el}
                        &lt;/li&gt;
                      ))}
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div&gt;
                  &lt;p className=&quot;hover:text-sky-600 hover:cursor-pointer my-2 flex items-center&quot;&gt;
                    Ανακάλυψε τα έργα
                    &lt;ArrowSmRightIcon className=&quot;h-5 w-5 text-sky-500&quot; /&gt;
                  &lt;/p&gt;
                  &lt;p className=&quot;hover:text-sky-600 hover:cursor-pointer my-2 flex items-center&quot;&gt;
                    Δες τα testemonials
                    &lt;ArrowSmRightIcon className=&quot;h-5 w-5 text-sky-500&quot; /&gt;
                  &lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;w-1/2 rounded-lg p-5&quot;&gt;Diff Section&lt;/div&gt;
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p><em>Ignore all the greek in there</em></p>
  <h3>My problem</h3>
  <p>I get this very unexpted behaviour where <code>setusingPanel</code> doesn't mutate properly on the first time but only on the second.
  <a href="https://i.stack.imgur.com/Yr9Np.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yr9Np.gif" alt="enter image description here" /></a></p>
  <p>Even when i log out the usingPanel variable it is only changed correctly the second time around. Am I using the hooks incorrectly?</p>