<p dir="auto">I'm trying to implement server side rendering with react/redux. My components use <code class="notranslate">componentWillMount</code> to start fetching data from a REST API and I use a simple counter in my redux store to see how many fetching requests are pending. I then have this code server side:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  ReactDOM.renderToString(rootEle)

  store.subscribe(() =&gt; {
    const state = store.getState()
    if (state.wait === 0) {
      const html = ReactDOM.renderToString(rootEle)
      res.render(html)
    }
  })"><pre class="notranslate">  <span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">renderToString</span><span class="pl-kos">(</span><span class="pl-s1">rootEle</span><span class="pl-kos">)</span>

  <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">subscribe</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-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">state</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">getState</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-c1">wait</span> <span class="pl-c1">===</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">html</span> <span class="pl-c1">=</span> <span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">renderToString</span><span class="pl-kos">(</span><span class="pl-s1">rootEle</span><span class="pl-kos">)</span>
      <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">html</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">which would work except for the fact that the second <code class="notranslate">ReactDOM.renderToString(rootEle)</code> fires all the componentWillMount events again, which increase the wait counter, which results in an infinite loop. So ideally, I was wondering if there was a way to call   <code class="notranslate">const something = ReactDOM.render(rootEle)</code>, wait a few seconds for my wait counter to go down to zero and <code class="notranslate">res.render(something.toString())</code>.</p>
<p dir="auto"><strong>Edit:</strong> As a temporary fix, I'm unsubscribing from the redux store when I reach wait === 0:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  ReactDOM.renderToString(rootEle)

  const unsubscribe = store.subscribe(() =&gt; {
    const state = store.getState()
    if (state.wait === 0) {
      unsubscribe()
      const html = ReactDOM.renderToString(rootEle)
      res.send(html)
    }
  })"><pre class="notranslate">  <span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">renderToString</span><span class="pl-kos">(</span><span class="pl-s1">rootEle</span><span class="pl-kos">)</span>

  <span class="pl-k">const</span> <span class="pl-s1">unsubscribe</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">subscribe</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-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">state</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">getState</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-c1">wait</span> <span class="pl-c1">===</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">unsubscribe</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
      <span class="pl-k">const</span> <span class="pl-s1">html</span> <span class="pl-c1">=</span> <span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">renderToString</span><span class="pl-kos">(</span><span class="pl-s1">rootEle</span><span class="pl-kos">)</span>
      <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">send</span><span class="pl-kos">(</span><span class="pl-s1">html</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">though it still does a bunch of useless async calls because that second renderToString calls the componentWillMount methods again.</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>