i18nLoadedAt prop sent even if cached - triggering unnecessary re-renders

Initially (without caching) I was seeing 14 re-renders on a simple page which I thought was way beyond reasonable, thinking we have fundamentally coded something incorrectly.

I found i18nLoadedAt prop to be sent even if the locale is cached. I have created a Performance class that I run shouldComponentUpdate through and it logs any diff in development.

I have primed the following scenario by:

1. loading the page (primes the i18n cache, specifically the common namespace)
2. triggering the authentication dialog (same page)
3. clearing the log
4. triggering the authentication dialog (same as 2 above)

Here is the sequence:

# trigger the dialog
[Performance] [AppFrame] is dirty: state (key showAuthentication is diff)
[i18n] translator: missingKey - en common %s - $t(domain) %s - $t(domain)
[Performance] [AppFrame] is dirty: props ([i18nLoadedAt] keys are diff)
[18n] translator: missingKey - en common %s - $t(domain) %s - $t(domain)

So, the prop i18nLoadedAt is marking my component as dirty, even though:

1. the i18n is cached and did not change
2. my component has not changed and does not need to be re-rendered

Questions/solutions

1. What is the intended purpose of i18nLoadedAt?
2. Why is the i18nLoadedAt passed when the namespace in question is cached?
3. As a hack (which I don’t like), I could ignore i18nLoadedAt, but this doesn’t seem like the right thing to do, and depending on 1 above, it may harm i18n non-cached locale pages and dynamic updating.

Thoughts?

[rosskevin]

• bindI18n: false had no effect
• bindStore: false worked!

(options above tried with wait: true)

So minimally with our cached setup, it seems we always want {wait: true, bindStore: false} on every translate call.

Is there a way to default these globally so I don’t need to add these options in all our components? I see in the source that they are defaulted in the #translate options if not specified. I could wrap it in a function, but it seems like we are adding up a ton of HOCs on an actual widget. If I did that, my widget would actually look like myTranslate(translate(pure(relayContainer(Foo)))), so any recommended global config or pattern is appreciated. Thank you

[jamuhl]

@zarela yes beside that you now can set that globally too: https://react.i18next.com/components/i18next-instance.html

or by using the context API (our own): https://github.com/i18next/react-i18next/blob/master/src/context.js#L13