What’s the difference between hydrate() and render() in React 16?

I’ve read the documentation, but I didn’t really understand the difference between hydrate() and render() in React 16.

I know hydrate() is used to combine SSR and client-side rendering.

Can someone explain what is hydrating and then what is the difference in ReactDOM?

Answer

From the ReactDOMServer docs (emphasis mine):

If you call ReactDOM.hydrate() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

The text in bold is the main difference. render may change your node if there is a difference between the initial DOM and the current DOM. hydrate will only attach event handlers.

From the Github issue that introduced hydrate as a separate API:

If this is your initial DOM:

<div id="container">
    <div class="spinner">Loading...</div>
</div>

and then call:

ReactDOM.render(
   <div class="myapp">
      <span>App</span>
   </div>,
   document.getElementById('container')
)

intending to do a client-side only render (not hydration). Then you end with

<div id="container">
   <div class="spinner">
       <span>App</span>
   </div>
</div>

Because we don’t patch up the attributes.

Just FYI the reason they didn’t patch the attributes is

… This would be really slow to hydrate in the normal hydration mode and slow down initial render into a non-SSR tree.