A Visual Guide to React Mental Models: UseState, UseEffect and Lifecycles
While equivalent to a proper approach, it feels like hooks are an unnecessary hack.<p>What could be done is to have the component function return a closure that returns the VDOM nodes instead of the VDOM nodes themselves, and then the hooks would be run only once, since rerendering would only run the returned closure and not the whole component function, and there would be no need  for the magic or rules.<p>Like this:<p><pre><code>  const Component = component((comp) =&gt; {
    const [show, setShow] = useState(comp, false);

    return (...props) =&gt; (
      &lt;div&gt;
        &lt;button onClick={() =&gt; setShow(!show())}&gt;Show Menu&lt;&#x2F;button&gt;
        &#x2F;&#x2F; Mounted with show = true and unomunted with show = false
        {show() &amp;&amp; &lt;MenuDropdown &#x2F;&gt;}
      &lt;&#x2F;div&gt;
    );
  });
</code></pre>
Where the changes are that the hook takes the component as an argument, show is now a function rather than a value and a closure (that takes the props) is returned rather than returning the VDOM nodes directly.<p>The React Hooks API is essentially equivalent to this, but inelegant, unintuitive and somewhat inefficient.