title: Rules of Hooks Where is the top level
body: <p>I have the following component in React</p>
  
  <pre><code>import React from 'react'
  import { Row, Col, Form, Input, Button, Card } from 'antd';
  import { FormComponentProps } from 'antd/lib/form/Form';
  import Particles from 'react-particles-js';
  import { useTranslation } from "react-i18next";
  import { connect } from 'react-redux';
  
  import { RootState } from '../../services/store/rootReducer';
  import { UsersActions } from '../../services/store';
  
  interface LoginProps extends FormComponentProps {
      rootState: RootState
  }
  
  class Login extends React.Component&lt;LoginProps&gt; {
      state = { email: '', password: ''};
  
      changeHandler = (e: any, name: any) =&gt; {
          var value = e.target.value;
          this.setState({[name]: value})
      }
  
      loginUser = () =&gt; {
          try {
              UsersActions.loginRequestAsync(this.state, (token: any) =&gt; {
                  console.log(token);
              });
          } catch(exception)
          {
              console.log(exception)
          }
      }
  
      render() {
          const { t } = useTranslation();
          const { getFieldDecorator } = this.props.form;
          return (
              &lt;div&gt;                
                  ///blabla
              &lt;/div&gt;
          )
      }
  }
  
  const mapStateToProps = (state: RootState) =&gt; ({
      rootState: state
  });
  const mapDispatchToProps = {}
  const createdForm = Form.create()(Login);
  
  export default connect(
      mapStateToProps,
      mapDispatchToProps
  )(createdForm);
  </code></pre>
  
  <p>When I add the line </p>
  
  <p><code>const { t } = useTranslation();</code></p>
  
  <p>The app do not compile with </p>
  
  <p>×</p>
  
  <blockquote>
    <p>Invalid hook call. Hooks can only be called inside of the body of a
    function component. This could happen for one of the following
    reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    fix this problem.</p>
  </blockquote>
  
  <p>Now, I tried to understand the rule, hooks must be called only on top level of a component in order for react to always load the component the same way. But where is my top level ?</p>
  
  <p>I tried to put outside of render and as a property of the component, I still have the same loading error.</p>