Redux-devtools: react warns on reusing markup

[floydwch]

Hi,

I'm trying to install redux-devtools on an universal app, it works fine but there is a warning in the console:

main.bundle.js:11559 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) tion.3"><li style="position:relative;pad
 (server) tion.3"><li style="padding-top:3px;paddi

[gaearon]

Please see https://github.com/facebook/react/issues/6451. On an unrelated note, I don’t think rendering <DevTools> universally is useful: actions may not match, for example. I would render it on the client only.

[floydwch]

@gaearon

OK.. So it's due to https://github.com/facebook/react/issues/6451 .

And on the server rendering DevTools, rendering it on the server is for the sake of reusing markup too. If avoid rendering it on the server, it'll warn too. Or there is a better way to do it?

[gaearon]

If avoid rendering it on the server, it'll warn too.

No, just render it after componentDidMount. For example:

class Root extends Component {
  constructor(props) {
    super(props)
    this.state = { isMounted: false }
  }

  componentDidMount() {
    this.setState({ isMounted: true })
  }

  render() {
    return (
      <div>
        <App />
        {this.state.isMounted && <DevTools />}
      </div>
    )
  }
}

[floydwch]

Cool!

Thank you!