React-i18next: Unnecessary Rerenderings

[toytonic]

I am currently debugging my react-native app for performance bottlenecks. One thing I noticed is that when using the translate HOC, I get multiple rerenderings based on a prop change of i18nOptions. usePureComponent doesn't help or change the behavior.

Am I missing something here?

Thanks for the lib and help ;)

[jamuhl]

did you set wait: true if not initial load of multiple namespaces will trigger a few rerenders ?!? Also depending on your usage you can set bindStore: false

what version are you using? does it already have the omitBoundRerenders option...

[jamuhl]

sorry hit the wrong button...reopened

[toytonic]

I'm on the latest version 8.0.7. I already tried with wait and bindStore. Haven't tried with omitBound...

The rerenderings happen during navigating on each wrapped component.

[jamuhl]

hm...omitBound...is set to true per default...

hm...while navigating...is this reproduceable on our reactnative sample https://github.com/i18next/react-i18next/tree/master/example/reactnative-expo ?!?

never checked that there - only on the react sample and there were no unneeded rerenders...

[toytonic]

Will dig down deeper asap (tomorrow). Will also check the RN example and see if it is reproducible.

[jamuhl]

Awesome...thank you for digging deeper

[toytonic]

I can confirm that the example works without any unnecessary renderings.

In my app I am wrapping the App Component that holds the StackNavigator (redux controlled) component in a translate HOC (to display a beta badge). Once I remove the translate HOC there, the above mentioned rerenderings while navigating are gone.

[jamuhl]

closing for now...feel free to reopen if encounter any other problem

[yard2010]

Actually, when using the HOC, I get multiple rerenderings based on a prop change of i18nOptions, just like OP. It looks like I'm getting i18nOptions as a prop (on the child of the HOC), even tho its not documented here. Am I doing something wrong?

[jamuhl]

like written...it works like intended .... if all done right (wait: true, bindStore: false) you do get only needed rerenders...at least until you do something different from the samples...

[jamuhl]

could you try with [email protected]

FYI: https://github.com/i18next/react-i18next/issues/573#issuecomment-432636954

[toytonic]

Just a comment related to my past experience: In my case it was also the prop i18nOptions which caused the rerenderings. Removing the top most translate HOC solved the problem, but felt more like a workaround. Will try with 8.1.1 asap and report back.