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

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;

Update: This is how I would probably use it.

export const useLanguage = () => {
  const [l, setL] = useState({i18next});

  useEffect(() => {
    apiDelegate.getTranslations().then((result) => {
      // ...
    i18next.changeLanguage(navigator.language);
    setL({i18next});
    });
  }, []);

  return l;
};

This seems to be a duplicate of:

• how to incorporate API data in i18next instead of static file
• Code is working when reading data from file but not API

You may want to use i18next-http-backend: how to incorporate API data in i18next instead of static file