title: React.js i18n dynamically change language
body: <p>I am using &quot;i18n&quot; for multilingual support in my &quot;React.js&quot; project. I have a &quot;Switch&quot; button in &quot;Navbar&quot; component. and when that button is clicked I add current language information to &quot;lcoalstore&quot;. And when I check in browser, language option works dynamically in &quot;localstore&quot;. My problem is I want to change app language every time user changes language. But that doesn't happen.
  Here is my i18n code:</p>
  <pre><code>import i18n from &quot;i18next&quot;;
  import { initReactI18next } from &quot;react-i18next&quot;;
  import messages_az from &quot;./translations/az.json&quot;;
  import messages_en from &quot;./translations/en.json&quot;;
  
  // the translations
  // (tip move them in a JSON file and import them)
  const resources = {
    en: {
      translation: messages_en,
    },
    az: {
      translation: messages_az,
    },
  };
  
  
  
  
  i18n
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
      resources,
      lng: localStorage.getItem(&quot;lang&quot;),
      detection: {
        order: [&quot;localStorage&quot;, &quot;lang&quot;],
        lookupQuerystring: &quot;lang&quot;,
        lookupLocalStorage: &quot;lang&quot;,
        caches: [&quot;localStorage&quot;],
      },
      keySeparator: false, // we do not use keys in form messages.welcome
      fallbackLng: &quot;az&quot;, // use az if detected lng is not available
      interpolation: {
        escapeValue: false, // react already safes from xss
      },
    });
  
  export default i18n;
  </code></pre>