Is it ok to use ReactDOMServer.renderToString in the browser in areas where React isn't directly managing the DOM? Is it ok to use ReactDOMServer.renderToString in the browser in areas where React isn't directly managing the DOM? reactjs reactjs

Is it ok to use ReactDOMServer.renderToString in the browser in areas where React isn't directly managing the DOM?


According to the new documentation: https://reactjs.org/docs/react-dom-server.html

The following methods can be used in both the server and browser environments:

  • renderToString()
  • renderToStaticMarkup()


I know it is too old question, but since it has not been answered I wanted to share my thoughts.

I was using the same thing, renderToString, but as the documentation recommends not to use it on client-side, I achieved it in another way, by using the react-dom's render method to render the custom component into div

var myDiv = document.createElement('div');ReactDOM.render(  <MarkerContents data={this.props.data} />,  myDiv);var myIcon = L.divIcon({     iconSize: new L.Point(50, 50),     html: myDiv.innerHTML});


As Thomas already said, yes, you can use renderToString on the client. Just to be clear though, you will need to import ReactDOMServer on the client, which may seem counter-intuitive but appears to be correct. Example (on the client):

import React from 'react';import ReactDOMServer from 'react-dom/server';const MyComp = (props) => {  const html = ReactDOMServer.renderToString(<div>{someFunc(props)}</div>);  // do something with your html, then  return <div dangerouslySetInnerHTML={{__html: html}}></div>;};