How to let React rehydration ignore checksums of specific components?

Question

When rehydrating, React will complain when the initially rendered markup doesn't match the server markup exactly. It is however not entirely uncommon for certain components to not yield identical results clientside and serverside. Most trivially, consider a component that displays the current time:

function Now() {
  return <span>{ new Date().toString() }</span>;
}

Obviously such a component would show a different value every time it's rendered, and as such React will always warn about incorrect checksums.

How can I tell React that it's okay if the client renders something differently from the server, for specific components?

Answer 1

To answer my own question, since React v16 the documentation says this about it:

If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a state variable like this.state.isClient, which you can set to true in componentDidMount(). This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. Note that this approach will make your components slower because they have to render twice, so use it with caution.