I18next: remove removeResourceBundle in componentWillUnmount()

[slim-hmidi]

I'm loading translations in my component :

class App extends Component {

  componentWillReceiveProps(nextProps) {
    if (this.props.occupationTypes.length === 0 && nextProps.occupationTypes.length > 0) {
      const occupationType = {
        fr: {},
        en: {},
      };
      nextProps.occupationTypes.forEach((result) => {
        occupationType.fr = Object.assign(
          occupationType.fr,
          { [result.id]: result.name.fr },
        );
        occupationType.en = Object.assign(
          occupationType.en,
          { [result.id]: result.name.en },
        );
      });
      this.props.i18n.addResourceBundle('fr', 'occupationType', occupationType.fr);
      this.props.i18n.addResourceBundle('en', 'occupationType', occupationType.en);
    }
  }
  componentWillUnmount() {
    this.props.i18n.removeResourceBundle('fr', 'occupationType');
    this.props.i18n.removeResourceBundle('en', 'occupationType');
  }
}

The first load of the component returns me the translations, however when I load it another time I got these errors:

i18next::translator: missingKey en occupationType 1 1
logger.js:23
i18next::translator: missingKey en occupationType 2 2
logger.js:23
i18next::translator: missingKey en occupationType 3 3
logger.js:23
i18next::translator: missingKey en occupationType 4 4
logger.js:23
i18next::translator: missingKey en occupationType 5 5
logger.js:23
i18next::translator: missingKey en occupationType 6 6
logger.js:23
i18next::translator: missingKey en occupationType 7 7
logger.js:23
i18next::translator: missingKey en occupationType 8 8
logger.js:23
i18next::translator: missingKey en occupationType 9 9
logger.js:23
i18next::translator: missingKey en occupationType 10 10
logger.js:23
i18next::translator: missingKey en occupationType 11 11

I want to remove the resource Bundle when the component will be unmounted and not recreate the bundle if there is not any difference between the prevProps and nextProps .Is it a good practice to use componentWillUnmount to remove resource bundle in order to gain memory?

[jamuhl]

Honestly i never saw someone adding resourceBundles on mount and remove them on unmount...do you really have to provide those during render time -> wouldn't it be better to have them in a separate namespace file and let react-i18next grab that file before rendering?

But overall - no...i guess it's not needed to remove those bundles again.

[slim-hmidi]

In fact I'm not certain if it's a best practice to remove a bundle in componentWillMount. However I tried to gain memory and use the translation in the suitable component and not load them when initializing the app.

[jamuhl]

you do not have to load all translations on init -> https://react.i18next.com/components/translate-hoc will load translations based on given namespaces if yet not loaded.

[slim-hmidi]

@jamuhl thanks for the link I'm using translate in some components.

[jamuhl]

ah ok. guess than you might have to remove that willunmount...at least i see no other fix

[slim-hmidi]

@jamuhl I didn't know if should I ask this question in this issue or another place.But I want to know when I have a db contains 1M of elements and each one contains many translations.Should I create different namespace files and put the 1M elements on them and use translate whenever I need some of them or use dynamic load translations and create translations when the component mounted for needed elements?

[jamuhl]

depends:

if possible to structure into multiple namespaces that could be loaded when needed i would go that road. Keeping those namespace files in a size that makes sense -> not over 2000 keys - so those files could still easily managed

for your case where you already got translation in a database and you do not really need translation functionality on those (nesting, interpolation, plurals) you might also use some custom functionality to get those values from your database using the language from i18next -> i18next.languages[0]

really hard to say as this seems like a very custom use case. sorry

[slim-hmidi]

@jamuhl thanks for the proposition ;)

[slim-hmidi]

removing componentWillUnmount() fix the problem in this case.