Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks : <p>Given the following component, when I press down on the age selector and change the value to 15, such that I render a form without the driver license field, I get the error:</p>

<pre><code>Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
    at invariant (react-dom.development.js:55)
    at finishHooks (react-dom.development.js:11581)
    at updateFunctionComponent (react-dom.development.js:14262)
    at beginWork (react-dom.development.js:15103)
    at performUnitOfWork (react-dom.development.js:17817)
    at workLoop (react-dom.development.js:17857)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:17113)
    at renderRoot (react-dom.development.js:17957)
    at performWorkOnRoot (react-dom.development.js:18808)
    at performWork (react-dom.development.js:18716)
    at flushInteractiveUpdates$1 (react-dom.development.js:18987)
    at batchedUpdates (react-dom.development.js:2210)
    at dispatchEvent (react-dom.development.js:4946)
    at interactiveUpdates$1 (react-dom.development.js:18974)
    at interactiveUpdates (react-dom.development.js:2217)
    at dispatchInteractiveEvent (react-dom.development.js:4923)
</code></pre>

<p>Example code below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const {useState} = React;

function App() {
  const [name, setName] = useState('Mary');
  const [age, setAge] = useState(16);

  if (age &lt; 16) {
    return (
      &lt;div&gt;
        Name:{' '}
        &lt;input
          value={name}
          onChange={e =&gt; {
            setName(e.target.value);
          }}
        /&gt;
        &lt;br /&gt;
        Age:{' '}
        &lt;input
          value={age}
          type="number"
          onChange={e =&gt; {
            setAge(+e.target.value);
          }}
        /&gt;
      &lt;/div&gt;
    );
  }

  const [license, setLicense] = useState('A123456');

  return (
    &lt;div&gt;
      Name:{' '}
      &lt;input
        value={name}
        onChange={e =&gt; {
          setName(e.target.value);
        }}
      /&gt;
      &lt;br /&gt;
      Age:{' '}
      &lt;input
        value={age}
        type="number"
        onChange={e =&gt; {
          setAge(+e.target.value);
        }}
      /&gt;
      &lt;br /&gt;
      Driver License:{' '}
      &lt;input
        value={license}
        onChange={e =&gt; {
          setLicense(e.target.value);
        }}
      /&gt;
    &lt;/div&gt;
  );
}

ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>
