Facing difficulty in initialize i18next react component with fetch response data?

I am using i18next to do the internalization.

Default fetch request used to get a data from server and the language information available in response data. Based on language info the page has to be loaded with corresponding language

import i18n from 'i18next'; import { reactI18nextModule } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import translationEN from './locales/en/translation.json'; import translationDE from './locales/de/translation.json';  // the translations let language; function sendRequest(resources) {   console.log('resources', resources);   i18n     .use(reactI18nextModule) // passes i18n down to react-i18next     .init(       {         resources,         lng: language,         fallbackLng: 'en',         keySeparator: false, // we do not use keys in form messages.welcome          interpolation: {           escapeValue: false // react already safes from xss         }       },       function() {         fetch('http://localhost:3100/getLang')           .then(data => data.json())           .then(res => {             console.log(res);             language = res.lang;             i18n.changeLanguage(language, (err, t) => {               if (err)                 return console.log(                   'something went wrong loading the language',                   err                 );             });           });       }     );   return i18n; } function i18() {   const resources = {     en: {       translation: translationEN     },     de: {       translation: translationDE     }   };   return sendRequest(resources); } export default i18(); 

Language variable is undefined initially. For the very first time i18n init method setup with “fallbackLng” variable instead of “lng”. After that fetch request goes in callback of init method. That will have the response of language need to used. Then i18n changeLanguage method will help to change language.

I am just wondering how can i execute fetch request prior to i18n initialization. I don’t like the approach of initialize the i18next with some default language first and then moved to different language. When i tried to initialize i18n in then part of fetch request doesn’t works for me.

Is there any alternative way available to execute fetch request first and then setup i18n before exporting the component?

Thanks in advance for any suggestion!