Is it ok to use ReactDOMServer.renderToString in the browser in areas where React isn't directly managing the DOM? : <p>I'm working on an app using <a href="http://leafletjs.com/" rel="noreferrer">Leaflet</a> (via <a href="https://github.com/PaulLeCam/react-leaflet" rel="noreferrer">react-leaflet</a>). Leaflet directly manipulates the DOM. The react-leaflet library doesn't change that, it just gives you React components that you can use to control your Leaflet map in a React-friendly way.</p>

<p>In this app, I want to use custom map markers that are divs containing a few simple elements. The way to do that in Leaflet is to set your marker's <code>icon</code> property to a <a href="http://leafletjs.com/reference.html#divicon" rel="noreferrer">DivIcon</a>, in which you can set your custom HTML. You set that inner HTML by setting the DivIcon's <code>html</code> property to a string containing the HTML. In my case, I want that HTML to be rendered from a React component.</p>

<p>In order to do that, it seems like the correct approach is to use <code>ReactDOMServer.renderToString()</code> to render the Component that I want inside the map marker into a string, which I would then set as the <code>html</code> property of the DivIcon:</p>

<p><strong><em>MyMarker.js:</em></strong></p>

<pre><code>import React, { Component } from 'react'
import { renderToString } from 'react-dom/server'
import { Marker } from 'react-leaflet'
import { divIcon } from 'leaflet'

import MarkerContents from './MarkerContents'

export class MyMarker extends Component {
  render() {
    const markerContents = renderToString(&lt;MarkerContents data={this.props.data} /&gt;)
    const myDivIcon = divIcon({
      className: 'my-marker',
      html: markerContents
    })

    return (
      &lt;Marker
        position={this.props.position}
        icon={myDivIcon} /&gt;
    )
  }
}
</code></pre>

<p>However, according to the <a href="https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring" rel="noreferrer">React docs</a>:</p>

<blockquote>
  <p>This [renderToString] should only be used on the server.</p>
</blockquote>

<p>Is this a strict rule, or is it only meant to dissuade people from circumventing ReactDOM's efficient management of the DOM?</p>

<p>I can't think of another (better) way to accomplish what I'm after. Any comments or ideas would be greatly appreciated.</p>
