title: Is it safe to render a react portal into another component DOM?
body: <p>Consider the following example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class GridContainer extends React.Component {
    ...
    render (){
      return &lt;div&gt;
        &lt;Pagination portalId="portal-id"&gt;&lt;/&gt;
        &lt;Grid ...&gt;
      &lt;/div&gt;
    }
  }
  
  class Grid extends React.Component {
    ...
    render (){
      return &lt;div&gt;
        &lt;div id="portal-id"&gt;&lt;/&gt;
        &lt;table ...&gt;
      &lt;/div&gt;
    }
  }
  
  class Pagination extends React.Component {
    ...
    render (){
      return return ReactDOM.createPortal(&lt;div&gt;Paginator DOM...&lt;/div&gt;, document.getElementById(this.props.portalId));
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is it safe to render a portal inside other components DOM? I've tested it and it works, but I don't know if this is reliable. The <code>Portals</code> doc mention that you can render a portal in a DOM node but nothing about components DOM.</p>
  
  <p>Why is this different (speculating here)? while updating the portal parent component, in the reconciliation process the diff might find the inconsistency and remove the portal node.</p>
  
  <p>From my testing, the above doesn't happen but I don't know if I can assume that react handles it. So here comes the Q:</p>
  
  <p>Is it safe to render a portal into another component DOM?</p>