title: How to use React Hooks in React standalone?
body: <p>I am trying to use React Hooks in a standalone UMD environment. I am getting the below error</p>
  
  <blockquote>
    <p>Uncaught Invariant Violation: Minified React error #307;</p>
  </blockquote>
  
  <p>The error is pointing me to <a href="https://reactjs.org/docs/error-decoder.html/?invariant=307" rel="nofollow noreferrer">https://reactjs.org/docs/error-decoder.html/?invariant=307</a></p>
  
  <p>How do i use Hooks in this case? Below is my code: </p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js"&gt; &lt;!--&lt;![endif]--&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;title&gt;React Hooks&lt;/title&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href=""&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!--[if lt IE 7]&gt;
              &lt;p class="browsehappy"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="#"&gt;upgrade your browser&lt;/a&gt; to improve your experience.&lt;/p&gt;
          &lt;![endif]--&gt;
          &lt;div id="root"&gt;&lt;/div&gt;
  
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
          &lt;script src="App.js" async defer&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>var CounterText = function(props) {
      return React.createElement(
          'div',
          null,
          `You clicked ${props.count} times!`
      );
  }
  
  var ButtonCounter = function(props) {
      return React.createElement(
          'button',
          {className: 'btn', onClick: props.clickHandler},
          `Click Me!`
      );
  }
  
  var Counter = function() {
      var state = React.useState(0);
      var count = state[0];
      var setCount = state[1];
  
      return React.createElement(
          'div',
          {className: 'counter'},
          CounterText({count: 0}),
          ButtonCounter({})
      );
  }
  
  ReactDOM.render(
      Counter(),
      document.getElementById('root')
  );
  </code></pre>