title: Error: Hooks can only be called inside the body of a function component
body: <p>Hi everyone i'm trying to use hooks in my application but it keeps saying
  Unhandled Rejection (Invariant Violation): Hooks can only be called inside the body of a function component. I'm guessing one of my libraries are conflicting with hooks, since I can't find any problems with the code.</p>
  
  <p>this is my package.json, i'm migrating everything from recompose to hooks... I tried using hooks with nex.js in a test project and it was working fine there...</p>
  
  <pre><code>{
    "scripts": {
      "dev": "next",
      "build": "next build",
      "start": "next start"
    },
    "dependencies": {
      "next": "^7.0.2",
      "next-images": "^1.0.1",
      "react": "^16.7.0-alpha.2",
      "react-dom": "^16.7.0-alpha.2",
      "recompose": "^0.30.0",
      "styled-components": "^4.1.1"
    },
    "devDependencies": {
      "babel-plugin-styled-components": "^1.9.0",
      "eslint": "^5.9.0",
      "eslint-plugin-react": "^7.11.1",
      "eslint-plugin-react-hooks": "^0.0.0"
    }
  }
  </code></pre>
  
  <p>This is my code:</p>
  
  <pre><code>import Layout from "../components/Layout";
  import Head from "next/head";
  import Register from "../blocks/Register";
  import InputBox from "../components/InputBox";
  import regexUtils from "../utils/regexUtils";
  import { useState } from "react";
  
  
  function BaseComponent() {
      const { errors, onSubmit } = useOnSubmit();
      const [name, setName] = useHandleInputChange("");
      const [email, setEmail] = useHandleInputChange("");
      const [password, setPassword] = useHandleInputChange("");
      const [passwordAgain, setPasswordAgain] = useHandleInputChange("");
  
      return (
          &lt;Layout&gt;
              &lt;Head&gt;
                  &lt;title&gt;Sheet Builder - Register your account&lt;/title&gt;
              &lt;/Head&gt;
              &lt;Register&gt;
                  &lt;Register.Center&gt;
                      &lt;form&gt;
                          &lt;Register.Box&gt;
                              &lt;Register.Title&gt;Create Account&lt;/Register.Title&gt;
                              &lt;InputBox error={errors.name} value={name} onChange={setName}&gt;Your Name&lt;/InputBox&gt;
                              &lt;InputBox error={errors.email} value={email} onChange={setEmail}&gt;Email&lt;/InputBox&gt;
                              &lt;InputBox error={errors.password} value={password} onChange={setPassword} mask&gt;Password&lt;/InputBox&gt;
                              &lt;InputBox error={errors.passwordAgain} value={passwordAgain} onChange={setPasswordAgain} mask hint="Passwords must consist of at least 8 characters."&gt;Password Again&lt;/InputBox&gt;
                              &lt;Register.Button onClick={onSubmit} type="submit" value="Register your Sheet Builder account" /&gt;
                          &lt;/Register.Box&gt;
                      &lt;/form&gt;
                  &lt;/Register.Center&gt;
              &lt;/Register&gt;
          &lt;/Layout&gt;
      );
  }
  
  function useHandleInputChange(initialState) {
      const [value, setValue] = useState(initialState);
  
      const handleInputChange = (e) =&gt; {
          setValue(e.target.value);
      };
      return [value, handleInputChange];
  }
  
  function useOnSubmit() {
      const initialState =
      {
          email: false,
          name: false,
          password: false,
          passwordAgain: false
      };
  
      const [errors, setErrors] = useState(initialState);
  
      const onSubmit = (e)=&gt;{
          e.preventDefault();
          let result = {};
          result.email = !regexUtils.isEmailFormatValid(errors.email);
          result.name = !regexUtils.isFormatValid(errors.name);
          result.password = !regexUtils.isPasswordFormatValid(errors.password);
          result.passwordAgain = !regexUtils.isPasswordFormatValid(errors.passwordAgain);
          setErrors(result);
      };
  
      return {
          errors, 
          onSubmit
      };
  }
  
  
  export default BaseComponent;
  </code></pre>