can we use component before its completely finished in other react component

I am facing one strange issue in react/Javascript My below file calls the data from backend API and assign it for translation.

import i18next from 'i18next';
import apiDelegate from '../src/components/Utils/Common/api.js';
const LanguageDetector = require('i18next-browser-languagedetector');
const initReactI18next = require('react-i18next');

var output;
//API call
apiDelegate.getTranslations().then((result) => {
 output = JSON.stringify(result);
 const tr_fr = 'translation: ' +JSON.parse(output) ;
alert(tr_fr);
  i18next
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
      resources: {
        en: tr_fr,
      },
      fallbackLng: 'fr',
    });
  i18next.changeLanguage(navigator.language);
});

export default i18next;

Below lines is used for calling backedn API.
apiDelegate.getTranslations()
it returns data in the form of key value.
for ex {name:"Mahima",company:"Infosys",address:"Bangalore India"}
and I use these properties in my react componenet using below line.

i18n.t("name");

i18n.t("company") etc

Is it possible that these values are getting read in my component before apiDelegate() finished its execution.I mean is there a possibility code is using i18 file before its execution finished. because its not refelecting the values. instead of API if I use static files then it works perfectly.

Please help me , I am badly struggling to understand this. can it be resolved?

>Solution :

If you need your consumers to wait until the language has been setup, you could return a promise from this module instead. Something like:

let ready = false;

const start = () => {
  return new Promise((res) => {
    if (ready) return res(i18next);

    apiDelegate.getTranslations().then((result) => {
      output = JSON.stringify(result);
      const tr_fr = 'translation: ' + JSON.parse(output);
       i18next
         .use(LanguageDetector)
         .use(initReactI18next)
         .init({
           resources: {
             en: tr_fr,
           },
           fallbackLng: 'fr',
         });
       i18next.changeLanguage(navigator.language);
     });

     ready = true;
     return res(i18next);
  });
};

export default start;