<p dir="auto">Hi,</p>
<p dir="auto">When trying to unmount my whole app, I got some error.</p>
<blockquote>
<p dir="auto">Uncaught TypeError: Cannot read property 'firstChild' of undefined<br>
ReactMount.js:606ReactMount.findComponentRoot<br>
ReactMount.js:606ReactMount.findReactNodeByID ReactMount.js:552getNode<br>
ReactMount.js:128executeDispatch EventPluginUtils.js:109SimpleEventPlugin.executeDispatch<br>
SimpleEventPlugin.js:305forEachEventDispatch EventPluginUtils.js:95executeDispatchesInOrder<br>
EventPluginUtils.js:119executeDispatchesAndRelease EventPluginHub.js:46forEachAccumulated<br>
forEachAccumulated.js:25EventPluginHub.processEventQueue<br>
EventPluginHub.js:251runEventQueueInBatch<br>
ReactEventEmitterMixin.js:18ReactEventEmitterMixin.handleTopLevel<br>
ReactEventEmitterMixin.js:44handleTopLevelImpl ReactEventListener.js:80Mixin.perform<br>
Transaction.js:134ReactDefaultBatchingStrategy.batchedUpdates<br>
ReactDefaultBatchingStrategy.js:66batchedUpdates<br>
ReactUpdates.js:109ReactEventListener.dispatchEvent ReactEventListener.js:175</p>
</blockquote>
<p dir="auto">I think it's not a big deal.</p>
<p dir="auto">According to what I see with the debugger, it seems to be because a <code class="notranslate">SyntheticMouseEvent</code> is trying to get dispatched. And I guess the target has just been unmounted...</p>
<p dir="auto">Note that my use case looks like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var Hello = React.createClass({
    render: function() {
        return &lt;div onClick={unmount}&gt;Hello {this.props.name}&lt;/div&gt;;
    }
});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">Hello</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-en">render</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">unmount</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Hello <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</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-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">When using an <code class="notranslate">unmount</code> synchronous implementation, I get this error.<br>
When adding a setTimeout 0 in the unmount code, I got no error.</p>
<p dir="auto">I could not reproduce this in a jsfiddle, but I guess it's probably because I don't really know how batching work in React.</p>
<p dir="auto">Suppose a Backbone View named A, which contains a React component B. In B(React) there's a button, clicking the button unnmounts B(React) and rerenders A(Backbone). In my case I got an error like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot read property 'firstChild' of undefined f163bb52.main.min.js:7"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot read property 'firstChild' of undefined f163bb52.main.min.js:7
</code></pre></div>
<p dir="auto">After looking into it, I found events still processing even after that component unmounted from DOM. By examining <code class="notranslate">processingEventQueue</code> I found that event is that click event to do all this.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  /**
   * Dispatches all synthetic events on the event queue.
   *
   * @internal
   */
  processEventQueue: function() {
    // Set `eventQueue` to null before processing it so that we can tell if more
    // events get enqueued while processing.
    var processingEventQueue = eventQueue;
    eventQueue = null;
    forEachAccumulated(processingEventQueue, executeDispatchesAndRelease); &lt;-- error from here
    (&quot;production&quot; !== &quot;development&quot; ? invariant(
      !eventQueue,
      'processEventQueue(): Additional events were enqueued while processing ' +
      'an event queue. Support for this has not yet been implemented.'
    ) : invariant(!eventQueue));
  },"><pre class="notranslate">  <span class="pl-c">/**</span>
<span class="pl-c">   * Dispatches all synthetic events on the event queue.</span>
<span class="pl-c">   *</span>
<span class="pl-c">   * <span class="pl-k">@internal</span></span>
<span class="pl-c">   */</span>
  <span class="pl-s1">processEventQueue</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">// Set `eventQueue` to null before processing it so that we can tell if more</span>
    <span class="pl-c">// events get enqueued while processing.</span>
    <span class="pl-k">var</span> <span class="pl-s1">processingEventQueue</span> <span class="pl-c1">=</span> <span class="pl-s1">eventQueue</span><span class="pl-kos">;</span>
    <span class="pl-s1">eventQueue</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>
    <span class="pl-en">forEachAccumulated</span><span class="pl-kos">(</span><span class="pl-s1">processingEventQueue</span><span class="pl-kos">,</span> <span class="pl-s1">executeDispatchesAndRelease</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c1">&lt;</span><span class="pl-c1">--</span> <span class="pl-s1">error</span> <span class="pl-c1">from</span> <span class="pl-c1">here</span>
    <span class="pl-kos">(</span>"<span class="pl-c1">production</span>" <span class="pl-c1">!==</span> "<span class="pl-c1">development</span>" ? <span class="pl-c1">invariant</span><span class="pl-kos">(</span>
      <span class="pl-c1">!</span><span class="pl-c1">eventQueue</span><span class="pl-kos">,</span>
      '<span class="pl-s1">processEventQueue</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-v">Additional</span> <span class="pl-c1">events</span> <span class="pl-c1">were</span> <span class="pl-c1">enqueued</span> <span class="pl-c1">while</span> <span class="pl-c1">processing</span> <span class="pl-s">' +</span>
<span class="pl-s">      '</span><span class="pl-s1">an</span> <span class="pl-s1">event</span> <span class="pl-s1">queue</span><span class="pl-kos">.</span> <span class="pl-v">Support</span> <span class="pl-s1">for</span> <span class="pl-smi">this</span> <span class="pl-s1">has</span> <span class="pl-s1">not</span> <span class="pl-s1">yet</span> <span class="pl-s1">been</span> <span class="pl-s1">implemented</span><span class="pl-kos">.</span>'
    ) : invariant(!eventQueue));
  },</pre></div>
<p dir="auto">For now I added <code class="notranslate">setTimeout</code>(100ms) in my click handler and it became ok.</p>
<p dir="auto">Is there any plan to fix this case and React will just work with a timeout?</p>