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

Question

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

I know hydrate()

Answer 1

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:

    
Loading...

and then call:

ReactDOM.render(
   

      App
   
,
   document.getElementById('container')
)

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

   

       App
   

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.