Wasted renders when the parent component re renders

[ahoseinian]

Every time parent component re renders the child components that are wrapped with translate HOC are rerendering because the HOC is using Component not PureComponent. Is there a way to prevent this?

[jamuhl]

We once had PureComponents in place - but they did cause the opposite...not rerendering when needed.

Personally we do not use the hoc on every component but pass down the t function via props down to children.

Any improvement would be welcome...but i don't accept a simple replacement of Component with PureComponent.

[ahoseinian]

What do you think about adding a new option like usePureComponent ?

[jamuhl]

could live with that...

[ahoseinian]

Cool I will make a PR

[ahoseinian]

PR #357

[jamuhl]

was merged

[designbyadrian]

Could someone explain what difference usePureComponent makes? I had an issue where I got tons of re-renders until I passed t down to every child that needed it. Other libraries that use @decorators don't have this issue.

[jamuhl]

You get a reload...when translations changes -> on init when loading a lot of namespaces that or feeding resources manually that rerender could happen a few times -> as state changes multiple times.

you can play with the settings for bindStore, bindI18n (eg. set bindStore to false, bindI18n to languageChanged) https://react.i18next.com/components/translate-hoc.html#a-set-those-on-i18next-init

usePureComponents might also avoid rerenderings...but might have sideeffects in not rerendering when language changes....