title: The order of hooks issue with React and I18n
body: <p>I am working on a small project where I created a provider to change the language from Arabic to English and vice versa. Here is how it looks:</p>
  <pre><code>import React from &quot;react&quot;;
  import { useSelector } from &quot;react-redux&quot;;
  import { useTranslation } from &quot;react-i18next&quot;;
  
  const LanguageProvider = ({ children }) =&gt; {
  const lang = useSelector((state) =&gt; state.LanguageReducer);
  const { i18n } = useTranslation();
  React.useEffect(() =&gt; {
    if (i18n.changeLanguage) i18n.changeLanguage(lang.language);
  }, [i18n, lang]);
  
  return &lt;div {...{ dir: lang.activeDir }}&gt;{children}&lt;/div&gt;;
  };
  
  export default LanguageProvider;
  </code></pre>
  <p>And I wrap my app with this provide along with the context provider. But I face this issue when the home page of the project loads and I cannot solve it so far.</p>
  <p>React has detected a change in the order of Hooks called by LanguageProvider. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks</p>
  <p>What could the problem be here?</p>