React Warning when changing theme

[ryanbaer]

My app allows an admin to switch between different users. Each user has a different theme, which is applied when the admin switches. It does so via a component I made, WhitelabelProvider, which is nested inside of React Router's BrowserRouter component.

My WhitelabelProvider contains your library's Theme Provider, and renders it like so:

  render() {
    const { children } = this.props;
    const { theme } = this.state;

    return (
      <ThemeProvider theme={theme}>
        <div className="ThemedApp">
          <Favicon url={theme.app.favicon.src} />
          {children}
        </div>
      </ThemeProvider>
    );
  }

The remainder of the routes and components are rendered via the children prop.

I'm finding that, when changing themes, certain components, all of which use withTheme, are displaying warnings like so:

index.js:2177 Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the WithTheme(styled.div) component.

Am I somehow using ThemeProvider or WithTheme incorrectly? Any help is appreciated, and I'm happy to provide more context if needed.

Some relevant package.json entries:

"react": "^16.1.1",
"styled-components": "^3.2.3",
"theming": "^1.3.0"

[kof]

Please create a reproducible example on codesandbox.

[janhartmann]

@ryanbaer did you figure out the problem? I am currently struggling with the same issue :-)

[HenriBeck]

@janhartmann can you maybe create a reproducible example on codesandbox and maybe check if the same issue exists in v2? Because we don't use state anymore.

[janhartmann]

No issues in v2.

[HenriBeck]

Will close this as it is fixed in v2 and higher.