Translations not reactively updating in some React components

[jshimko]

Since the translated label props that get passed into the React components are just an i18n key that doesn't change, the components aren't re-rendering the new language.

For example, I switched to Spanish, reloaded the page, then switched to Chinese. This is what I get on the PDP.

If you take a look in the React devtools, you can see why the re-render didn't happen...

So we need to do something to invalidate the props when the language changes. Perhaps it makes sense to have the current language loaded in React context and then create a helper that watches for the change and forces a re-render on any i18n items. This would also be a great use case for Redux, but that's a lot more steps at this point (and probably not practical until the entire tree is React).

[jshimko]

Or maybe...

https://github.com/i18next/react-i18next

That's actually using React context to pass things down the tree, so it's pretty much exactly what I was saying above.

[mikemurray]

Might need to use the <TranslationProvider /> and the <Translation /> component. or someday, maybe redux.

[kieckhafer]

@jshimko I believe this is fixed in PR #2283, in this commit, which wraps the entire app inside the TranslationProvider. Once 1.2 is merged you should see the fix in master.

Closing for now, can re-open if needed.