title: React how can I fix stale state?
body: <p>Here is a simplified version of my code. What is a good solution to fix stale states?</p>
  <p>Wanted behavior: focus input field -&gt; dropdown appears (state is true) -&gt; click button -&gt; dropdown disappears (state is false)</p>
  <p>Actual behavior: focus input field -&gt; dropdown renders (state is true) -&gt; click button -&gt; dropdown disappears for 0.1 second (state is false) -&gt; dropdown appears (state is true)</p>
  <pre><code>const DropdownSelector = () =&gt; {
    const [toggleEnabled, setToggleEnabled] = useState(false);
  
    const handleToggle = () =&gt; setToggleEnabled(!toggleEnabled);
  
    const handleFocus = () =&gt; setToggleEnabled(true);
  
    return (
      &lt;div&gt;
        &lt;input value={val} onFocus={handleFocus} /&gt;
        &lt;button onClick={handleToggle}&gt;
        {toggleEnabled &amp;&amp; (
          &lt;div&gt;I'm a dropdown&lt;/div&gt;
        )}
      &lt;/div&gt;
    )
  }
  </code></pre>