Universe:i18n: Recommended way to re-render whole React app on language change

help
1

I am trying to implement i18n based on universe:i18n in a React app and wonder what the recommended way is to re-render the whole app if users change their language settings at runtime.

With tap:i18n, this worked automagically. But universe:i18n only updates the language strings if a component is explicitly re-rendered or a new component is being rendered.

Is there a way to force a “deep-re-render” of the whole React app somehow, neglecting any performance optimizations that are normally in place?

2

The way I do this is by setting a key based on the language on the main wrapper of my content. When the language changes, so does the key, and the entire page re-renders.

2 Likes
3

React-Intl wraps the entire app, similarly to what @jasongrishkoff proposes.

ReactDOM.render(
      <Provider store={store}>
        <IntlProvider locale={language} messages={messages}>
          <BrowserRouter history={history}>
            <App history={history} />
          </BrowserRouter>
        </IntlProvider>
      </Provider>, document.getElementById('app'))
1 Like
4

I second what @jasongrishkoff said - using key={locale} in your top-level component (or any other you’d want to re-render) is correct. Having a getLocaleReactive is also helpful:

// Initializes i18n._deps.
i18n.createReactiveTranslator();

// Plays well with useTracker.
function getLocaleReactive() {
  i18n._deps.depend();
  return i18n.getLocale();
}
1 Like
5

Interesting approach, thanks. But of course this means that really the whole app and DOM is rendered again, and not only the i18n texts.

6

Just for the records: I had a look at the React branch of the Meteor to do sample app now. They are using the Context API for this. It’s a bit complex to setup, but I finally made it work. I think the IntlProvider does it the same way.

Thanks at all who helped!