title: Run render and reconciler on children only
body: <p>I want to skip rendering of container, but run rendering and reconciliation for the <code>childeren</code> passed via <code>props</code>. In the next example you can click it and see</p>
  
  <pre><code>render
  render2
  render value 2001
  render value 3001
  </code></pre>
  
  <p>but I want it to be</p>
  
  <pre><code>render
  render value 1001
  render2
  render value 2001
  render value 3001
  </code></pre>
  
  <p>So I want <code>Value</code> <code>1001</code> to render, but without rendering <code>Wrapper1</code>.</p>
  
  <p>How can I do that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Value extends React.Component {
    render() {
      console.log("render value " + this.props.value);
      return this.props.value;
    }
  }
  
  class Wrapper1 extends React.Component {
    shouldComponentUpdate() {
      return false;
    }
  
    render() {
      console.log("render1");
      return this.props.children;
    }
  }
  
  class Wrapper2 extends React.PureComponent {
    render() {
      console.log("render2");
      return this.props.children;
    }
  }
  
  class App extends React.Component {
    state = { count: 0 };
  
    render() {
      console.log("render");
      return (
        &lt;div onClick={() =&gt; this.setState(({ count }) =&gt; ({ count: count + 1 }))}&gt;
          &lt;Wrapper1&gt;&lt;Value value={1000 + this.state.count} /&gt;&lt;/Wrapper1&gt;
          {" "}
          &lt;Wrapper2&gt;&lt;Value value={2000 + this.state.count} /&gt;&lt;/Wrapper2&gt;
          {" "}
          &lt;Value value={3000 + this.state.count} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.querySelector("main"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  
  &lt;main&gt;&lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>