Only re-rendering the first level of my nested call of components.

[fesnavarro]

I'm not sure if it is a issue but lets go...

Only re-rendering the first level of my nested call of components.

  render() {
    return (
      <ThemeProvider theme={getTheme(this.colorDecision())}>
        <IntlProvider definition={this.localeDefinition()}>
          <HtmlStyle>
            <AppStyle>
              <Header />
              <Router onChange={this.handleRoute}>
                <Home path="/" />
                <Layout path="/layout/" />
              </Router>
            </AppStyle>
          </HtmlStyle>
        </IntlProvider>
      </ThemeProvider>
    );
  }

Above Header, Home, Layout re-render the text after IntlProvider update the definition.

But it doesn't re-render on the components called by Home for example:

  render() {
    return (
      <HomeStyle>
        <Elevation z={2}>
          <StatusBanner />
          <ControlBanner />
          <MotorTable />
        </Elevation>
      </HomeStyle>
    );
  }

StatusBanner, ControlBanner, MotorTable do not re-render the texts after trigger the button for translate.

Something wrong or It can't go deep on the calls?

[pl12133]

Might need some more information to check on this one. Which version of preact-i18n do you have installed? Your issue may sound like https://github.com/synacor/preact-i18n/issues/39.

If you could fork this JSFiddle and create a reproduction it would really help understand the problem: https://jsfiddle.net/xyL04bzm/1/

[fesnavarro]

Might need some more information to check on this one. Which version of preact-i18n do you have installed? Your issue may sound like #39.

If you could fork this JSFiddle and create a reproduction it would really help understand the problem: https://jsfiddle.net/xyL04bzm/1/ Sure "dependencies": { "axios": "^0.19.2", "local-storage-fallback": "^4.1.1", "preact": "^8.4.2", "preact-compat": "^2.3.1", "preact-dom": "^1.0.1", "preact-feather": "^4.1.0", "preact-i18n": "^1.4.2", "preact-material-components": "^1.6.1", "preact-redux": "^1.2.0", "preact-router": "^2.6.1", "redux": "^3.6.0", "redux-logger": "^3.0.6", "styled-components": "^3.4.9" }

[pl12133]

With preact@8.4.2 and preact-i18n@1.4.2, you're using the Legacy Context API; and with that your child components will not be guaranteed to re-render when context changes. See https://reactjs.org/docs/legacy-context.html#updating-context This looks like a limitation of Legacy Context, so I don't think anything can be done unless you use workarounds as mentioned in the blog post from the above docs.

This is one of the reasons the latest version 2.1.2-preactx uses the new createContext API. You can install that if you are able to upgrade your project to Preact 10, but that is a major version with breaking changes.

npm install preact@latest preact-i18n@preactx