title: React Hook "useDispatch" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function
body: <p>What i'm doing is creating an authentication system with react hooks. However, when I declare and call a constant using a react component it returns the error below. What is the right place to declare a constant and / or a function?</p>
  <p>Error: <em><strong>React Hook &quot;useDispatch&quot; cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function</strong></em></p>
  <pre><code>function handleSubmit({email, password}) {
    dispatch(signInRequest(email, password));
  }
  
  const dispatch = useDispatch();
  
  
  
  class Login extends React.Component {
    render() {
      return (
        &lt;&gt;
          //Other code here
        &lt;/&gt;
      );
    }
  }
  
  export default Login;
  </code></pre>