How to minimize the number of useTranslation() I must call

Question

I'm currently developing a web application using React and TypeScript. For my app, I have all the texts saved in JSON files under the assets/locales folder, named according to the language used (en.json, jp.json, fr.json). Then, I'm using i18next and initReactI18next in the App.tsx like this:

i18n.use(initReactI18next).init({
  debug: true,
  resources: {
    en: { translation: enJson },
    jp: { translation: jpJson },
    fr: { translation: frJson },
  },
  lng: 'en',
  fallbackLng: false,
  returnEmptyString: false,
  interpolation: {escapeValue: false},
});

and then, from each of my components files, I have useTranslation and useEffect, so I can refer to JSON file for text like this:

{t('hello-world')}

instead of writing like:

Hello World

import { useTranslation } from 'react-i18next';

const exampleComponent = () => {
  const [t, i18n] = useTranslation();
  const [lang] = useState();

  useEffect(() => {
    i18n.changeLanguage(lang);
  }, [lang, i18n]);
....

But, I have to write useTraslation and useEffect at the top of every component file I use. I feel redundant, and there must be a better way. And it would be great if someone could share their knowledge. Thanks.

user_15293035 · Answer

the better approach could be, make a wrapper around those component for example: label could be the text you want to have, in case of preferred language change, if whole app, should be multilingual, you could use a global state, which on every lang. change, re-render whole tree.

const H1 = ({label}) => {

const { t } = useTranslation();
   return {t(label)};
}

user_1859027 · Answer

That‘s the nature of hooks. Alternatively, you can use a HOC: https://react.i18next.com/latest/withtranslation-hoc

like here: https://github.com/i18next/react-i18next/blob/master/example/react/src/App.js#L13

import { withTranslation } from 'react-i18next';

// use hoc for class based components
class LegacyWelcomeClass extends Component {
  render() {
    const { t } = this.props;
    return {t('title')};
  }
}
const Welcome = withTranslation()(LegacyWelcomeClass);

How to minimize the number of useTranslation() I must call

2 Answers