<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
When using <code class="notranslate">useState()</code> hook in a functional component, I get the following error:</p>
<blockquote>
<p dir="auto">Hooks can only be called inside the body of a function component</p>
</blockquote>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.</strong><br>
The functional component where the hook is being used:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const AuthForm = () =&gt; {
  const [value, setValue] = useState(1);

  return (
    &lt;Paper square&gt;
      &lt;Tabs
        value={value}
        indicatorColor=&quot;primary&quot;
        textColor=&quot;primary&quot;
        onChange={() =&gt; setValue(value)}
      &gt;
        &lt;Tab label=&quot;Active&quot; /&gt;
        &lt;Tab label=&quot;Active&quot; /&gt;
      &lt;/Tabs&gt;
    &lt;/Paper&gt;
  );
};"><pre class="notranslate"><code class="notranslate">const AuthForm = () =&gt; {
  const [value, setValue] = useState(1);

  return (
    &lt;Paper square&gt;
      &lt;Tabs
        value={value}
        indicatorColor="primary"
        textColor="primary"
        onChange={() =&gt; setValue(value)}
      &gt;
        &lt;Tab label="Active" /&gt;
        &lt;Tab label="Active" /&gt;
      &lt;/Tabs&gt;
    &lt;/Paper&gt;
  );
};
</code></pre></div>
<p dir="auto">package.json:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;nodemon index.js --ignore client&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@babel/core&quot;: &quot;^7.0.0&quot;,
    &quot;@babel/preset-env&quot;: &quot;^7.0.0&quot;,
    &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
    &quot;@material-ui/core&quot;: &quot;^3.9.2&quot;,
    &quot;apollo-boost&quot;: &quot;^0.1.27&quot;,
    &quot;axios&quot;: &quot;^0.18.0&quot;,
    &quot;babel-loader&quot;: &quot;^8.0.5&quot;,
    &quot;bcrypt-nodejs&quot;: &quot;0.0.3&quot;,
    &quot;body-parser&quot;: &quot;^1.16.0&quot;,
    &quot;connect-mongo&quot;: &quot;^2.0.3&quot;,
    &quot;express&quot;: &quot;^4.16.4&quot;,
    &quot;express-graphql&quot;: &quot;^0.7.1&quot;,
    &quot;express-session&quot;: &quot;^1.15.6&quot;,
    &quot;graphql&quot;: &quot;^14.1.1&quot;,
    &quot;html-webpack-plugin&quot;: &quot;^3.2.0&quot;,
    &quot;lodash&quot;: &quot;^4.17.4&quot;,
    &quot;mongoose&quot;: &quot;^5.4.11&quot;,
    &quot;passport&quot;: &quot;^0.4.0&quot;,
    &quot;passport-local&quot;: &quot;^1.0.0&quot;,
    &quot;react&quot;: &quot;16.8.1&quot;,
    &quot;react-apollo&quot;: &quot;^2.4.1&quot;,
    &quot;react-dom&quot;: &quot;16.8.1&quot;,
    &quot;react-router&quot;: &quot;^4.3.1&quot;,
    &quot;react-router-dom&quot;: &quot;^4.3.1&quot;,
    &quot;webpack&quot;: &quot;^4.29.3&quot;,
    &quot;webpack-dev-middleware&quot;: &quot;^3.5.2&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@babel/core&quot;: &quot;^7.0.0&quot;,
    &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.3.0&quot;,
    &quot;@babel/plugin-transform-react-jsx&quot;: &quot;^7.3.0&quot;
  }
}"><pre class="notranslate"><code class="notranslate">{
  "main": "index.js",
  "scripts": {
    "dev": "nodemon index.js --ignore client"
  },
  "dependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@material-ui/core": "^3.9.2",
    "apollo-boost": "^0.1.27",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.5",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.16.0",
    "connect-mongo": "^2.0.3",
    "express": "^4.16.4",
    "express-graphql": "^0.7.1",
    "express-session": "^1.15.6",
    "graphql": "^14.1.1",
    "html-webpack-plugin": "^3.2.0",
    "lodash": "^4.17.4",
    "mongoose": "^5.4.11",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "react": "16.8.1",
    "react-apollo": "^2.4.1",
    "react-dom": "16.8.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "webpack": "^4.29.3",
    "webpack-dev-middleware": "^3.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-transform-react-jsx": "^7.3.0"
  }
}
</code></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
App should run without any errors.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
React: 16.8.1<br>
ReactDOM: 16.8.1<br>
Chrome: 71.0.3578.98</p>
<p dir="auto">Currently, <code class="notranslate">createElement</code> throws the warning:</p>
<blockquote>
<p dir="auto">Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).</p>
</blockquote>
<p dir="auto">It would be more helpful if the warning actually said what value was passed, e.g.:</p>
<blockquote>
<p dir="auto">Warning: React.createElement: 5 is an invalid value for type. It should be a string (for DOM elements) or a ReactClass (for composite components).</p>
</blockquote>