<p dir="auto">As of React v15.2.0, the provided fiddle is throwing the "Missing React element for debugID" warning, which has been described as an internal (i.e. not user-facing) React warning.</p>
<p dir="auto"><a href="https://jsfiddle.net/s4c36s0n/" rel="nofollow">https://jsfiddle.net/s4c36s0n/</a></p>
<p dir="auto">This warning was not present in React v15.1.0.</p>
<p dir="auto">(I make no claim that this is a sane usage pattern, only that it exists in <a href="https://github.com/zenoamaro/react-quill/blob/master/src/toolbar.js#L157">real-world components</a> and that it's an unexpected failure case.)</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
As reported by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/adamryvola/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/adamryvola">@adamryvola</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="156804950" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/6869" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/6869/hovercard?comment_id=230349514&amp;comment_type=issue_comment" href="https://github.com/facebook/react/pull/6869#issuecomment-230349514">#6869 (comment)</a>, React is displaying a warning <code class="notranslate">Warning: ReactComponentTreeDevtool: Missing React element for debugID 2 when building stack</code> when another component is rendered in <code class="notranslate">componentWillMount</code></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template: <a href="https://jsfiddle.net/reactjs/69z2wepo/" rel="nofollow">https://jsfiddle.net/reactjs/69z2wepo/</a>).</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, {Component} from 'react';
import ReactDOM from 'react-dom';

const container = document.getElementById('container');
const menuContainer = document.getElementById('menu-container');

export default class App extends Component {

  componentWillMount() {
    ReactDOM.render(&lt;div /&gt;, menuContainer);  // &lt;= Trigger the warning
  }

  render() {
    return (
      &lt;div&gt;
        &lt;div&gt;App&lt;/div&gt;
      &lt;/div&gt;
    );
  }
}

ReactDOM.render(&lt;App /&gt;, container);
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-v">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">ReactDOM</span> <span class="pl-k">from</span> <span class="pl-s">'react-dom'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">container</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'container'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">menuContainer</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'menu-container'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">App</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-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-s1">menuContainer</span><span class="pl-kos">)</span><span class="pl-kos">;</span>  <span class="pl-c">// &lt;= Trigger the warning</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">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>App<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-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-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-s1">container</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">JSFiddle: <a href="https://jsfiddle.net/0n3a6vp9/" rel="nofollow">https://jsfiddle.net/0n3a6vp9/</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
According to <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaearon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gaearon">@gaearon</a> this warning is "against internal bugs in React, it's not meant for users" (source: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="156804950" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/6869" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/6869/hovercard?comment_id=230272365&amp;comment_type=issue_comment" href="https://github.com/facebook/react/pull/6869#issuecomment-230272365">#6869 (comment)</a>) so this warning should not be triggered.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
React <code class="notranslate">15.2.0</code>, no issue with <code class="notranslate">React 0.14.7</code></p>