React-i18next: Can't detect i18n.language changes in componentDidUpdate or shouldComponentUpdate

[richardhsueh]

Describe the bug
There is a function that i need to trigger based on the language changes, but some how I can't detect the changes in componentDidUpdate or shouldComponentUpdate. And I tried to console log this.props.i18n.language and prevProps.i18n.language, they are just the same

Occurs in react-i18next version
v.10.7.0

To Reproduce
Here is a codesandbox example https://codesandbox.io/s/62v094rj6z.
You can look at the Homepage.js
This one is a simplified version, but I think it can still demonstrate the idea that it can't detect the props changes in lifecycle event

Expected behaviour
In the codesandbox example, the Homepage component should update normally when i click on the links.

OS (please complete the following information):

• Device: [e.g. MBP 2017 13"]
• Browser: [e.g. Chrome 73.0.3683.103]

[jamuhl]

Do you need the previous language?

if not:

  componentDidUpdate(prevProps, prevState) {
    if (this.props.t !== prevProps.t) {
      console.log(this.props.i18n.language);
    }
  }

if yes:

• you need to persist lng on state to check for old

=> the if (this.props.i18n !== prevProps.i18n) won't ever trigger - the i18n instance stays the same

[richardhsueh]

I see, but it seems strange to reference the t function to check the language changes.
I remember at v.8.x.x, we can reference lng from props, which I think is more straight forward approach. Is there any special reason for this changes ?

[jamuhl]

there is no specific reason - beside the use case of needing this is totally unclear to me.

[richardhsueh]

Okay, anyway thanks a lot.

[jamuhl]

What is your use case for needing the previous language?

[richardhsueh]

I was developing a multi step ordering flow for a website, and during the process, there are many product informations that's require calling multiple apis to retrieve. And if the user change the language during the order flow, I will reset the ordering flow and recall all api to get product information of the new language.

[jamuhl]

So you do not really need the previous language - and the hook, HOC whatever will trigger a rerender anyway...also you could listen for i18next.on('languageChanged', () => {}) or do i miss something?

[richardhsueh]

Indeed I do not really need the previous language, but I do need to know the language changed.
I need to dispatch some redux actions when the language changed, is that case I should call those function within the componentDidUpdate, right ? Or is there a more appropriate way ?

Also should I put i18next.on('languageChanged', () => {}) inside the componentDidUpdate or elsewhere ?

[jamuhl]

i would put that into the i18n.js -> bind it once and trigger the action from there (directly calling your store.dispatch)