According to the react docs, renderToString() creates extra DOM attributes that React uses internally such as data-reactroot whereas renderToStaticMarkup does not.
And I thought that ReactDOM.hydrate() enables event handlers to be attached to the markup which is string-rendered via renderToString(), thanks to that extra DOM attributes such as data-reactroot.
But I've tested myself that ReactDOM.hydrate() also works with the static markup which is rendered via renderToStaticMarkup(), which means that the combination of ReactDOM.hydrate and renderToStaticMarkup() successfully attaches event handlers to the string-rendered DOM.
According to the Dan Abramov's issue, hydrate() does not rely on the internal react attribute (data-reactroot)
Instead, use hydrate() to explicitly tell React to hydrate existing HTML. Then it won't depend on whether data-reactroot exists or not.
So I might guess that it would always be better to use renderToStaticMarkup() instead of renderToString(), since performance would be more optimized by renderToStaticMarkup()
Is that ReactDOM.renderToString() just an old way before hydrate() released on React v16, only to be used with render() and dangerouslySetInnerHTML()?
Is it okay for me to think that we can always use renderToStaticMarkup() over renderToString()?
This question is related to my issue, but yet has no clarified answer.
