<p dir="auto">I was wondering if it was possible to render a react component server side without serialising it to a string. It should make it possible to trigger state changes without re-rendering the whole tree.</p>
<p dir="auto">For example, I'd like to be able to do something like this (pseudo-code):</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Test extends Component {
  componentWillMount() {
    // this method should only be called once, by `render(Test)`
    setTimeout(() =&gt; this.setState({ ready: true }), 1000)
  }
  render() {
    const { ready } = this.state
    if (ready) {
      return (&lt;strong&gt;I am ready&lt;/strong&gt;)
    }
    return  (&lt;strong&gt;I am not ready&lt;/strong&gt;)
  }
}

const tree = render(Test)
renderToString(tree)
// =&gt; &lt;strong&gt;I am not ready&lt;/strong&gt;
setTimeout(() =&gt; renderToString(tree), 2000)
// =&gt; &lt;strong&gt;I am ready&lt;/strong&gt;"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Test</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">componentWillMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">// this method should only be called once, by `render(Test)`</span>
    <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">ready</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">1000</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> ready <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">ready</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">strong</span><span class="pl-c1">&gt;</span>I am ready<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">strong</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">return</span>  <span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">strong</span><span class="pl-c1">&gt;</span>I am not ready<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">strong</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-s1">tree</span> <span class="pl-c1">=</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-v">Test</span><span class="pl-kos">)</span>
<span class="pl-en">renderToString</span><span class="pl-kos">(</span><span class="pl-s1">tree</span><span class="pl-kos">)</span>
<span class="pl-c">// =&gt; &lt;strong&gt;I am not ready&lt;/strong&gt;</span>
<span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">renderToString</span><span class="pl-kos">(</span><span class="pl-s1">tree</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">2000</span><span class="pl-kos">)</span>
<span class="pl-c">// =&gt; &lt;strong&gt;I am ready&lt;/strong&gt;</span></pre></div>
<p dir="auto">I don't really plan to use timeouts but it was to illustrate the idea.</p>
<p dir="auto">This would be another way to put it:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let setState
class Test extends Component {
  componentWillMount() {
    // important: this is called only once
    console.log('componentWillMount called')
    setState = this.setState.bind(this)
  }
  render() {
    const { ready } = this.state
    if (ready) {
      return (&lt;strong&gt;I am ready&lt;/strong&gt;)
    }
    return  (&lt;strong&gt;I am not ready&lt;/strong&gt;)
  }
}

const tree = render(Test)
// outputs: componentWillMount called
console.log(renderToString(tree))
// outputs: &lt;strong&gt;I am not ready&lt;/strong&gt;
setState({ ready: true })
console.log(renderToString(tree))
// outputs: &lt;strong&gt;I am ready&lt;/strong&gt;"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">setState</span>
<span class="pl-k">class</span> <span class="pl-v">Test</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">componentWillMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">// important: this is called only once</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'componentWillMount called'</span><span class="pl-kos">)</span>
    <span class="pl-s1">setState</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">setState</span><span class="pl-kos">.</span><span class="pl-en">bind</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> ready <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">ready</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">strong</span><span class="pl-c1">&gt;</span>I am ready<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">strong</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">return</span>  <span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">strong</span><span class="pl-c1">&gt;</span>I am not ready<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">strong</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-s1">tree</span> <span class="pl-c1">=</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-v">Test</span><span class="pl-kos">)</span>
<span class="pl-c">// outputs: componentWillMount called</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">renderToString</span><span class="pl-kos">(</span><span class="pl-s1">tree</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-c">// outputs: &lt;strong&gt;I am not ready&lt;/strong&gt;</span>
<span class="pl-s1">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">ready</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">renderToString</span><span class="pl-kos">(</span><span class="pl-s1">tree</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-c">// outputs: &lt;strong&gt;I am ready&lt;/strong&gt;</span></pre></div>
<p dir="auto">If this is not possible currently, would it be difficult to implement?</p>
<p dir="auto">It would seriously ease the process of building something isomorphic if componentWillMount could return a promise and that react would delay rendering until that promise is resolved. I have seen attempt of doing something like that in react-router and rrouter, however giving this responsibility to each component instead of a router module would make more sense for me.</p>