<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Report a possible bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When Component A renders Component B with a children prop that is a react component / JSX fragment any render of component A will recreate said children prop</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>
<p dir="auto">Example Code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import  React from 'react';

class ComponentWithChildren extends React.PureComponent {
  render() {
    console.log(&quot;RENDER COMP&quot;)
    return &lt;span&gt;Hello{this.props.children}&lt;/span&gt;
  }
}

class Children extends React.PureComponent {
  render() {
    return (
      &lt;div&gt;
        these are children
        &lt;span&gt;nested&lt;/span&gt;
      &lt;/div&gt;
    )
  }
}

class App extends React.PureComponent {

  update = () =&gt; this.setState({ count: this.state.count + 1 })

  state = {
    count: 0
  }

  render() {
    console.log(&quot;RENDER APP&quot;)
    return (
      &lt;div&gt;
        &lt;button onClick={this.update}&gt;Update&lt;/button&gt;
        &lt;ComponentWithChildren&gt;
          &lt;Children /&gt;
        &lt;/ComponentWithChildren&gt;
      &lt;/div&gt;
    )
  }
}

export default App;"><pre class="notranslate"><code class="notranslate">import  React from 'react';

class ComponentWithChildren extends React.PureComponent {
  render() {
    console.log("RENDER COMP")
    return &lt;span&gt;Hello{this.props.children}&lt;/span&gt;
  }
}

class Children extends React.PureComponent {
  render() {
    return (
      &lt;div&gt;
        these are children
        &lt;span&gt;nested&lt;/span&gt;
      &lt;/div&gt;
    )
  }
}

class App extends React.PureComponent {

  update = () =&gt; this.setState({ count: this.state.count + 1 })

  state = {
    count: 0
  }

  render() {
    console.log("RENDER APP")
    return (
      &lt;div&gt;
        &lt;button onClick={this.update}&gt;Update&lt;/button&gt;
        &lt;ComponentWithChildren&gt;
          &lt;Children /&gt;
        &lt;/ComponentWithChildren&gt;
      &lt;/div&gt;
    )
  }
}

export default App;
</code></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I would expect ComponentWithChildren not to re-render because none of its props actually changed</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></p>
<p dir="auto">React 15.4.1</p>
<p dir="auto">If you have</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="componentWillReceiveProps: function() {
    this.setState({x: this.state.x + 1});
    this.setState({x: this.state.x + 1});
}"><pre class="notranslate"><code class="notranslate">componentWillReceiveProps: function() {
    this.setState({x: this.state.x + 1});
    this.setState({x: this.state.x + 1});
}
</code></pre></div>
<p dir="auto">then <code class="notranslate">x</code> will only be incremented once because the new state will just be stored in <code class="notranslate">_pendingState</code> until <code class="notranslate">receiveProps</code> finishes. After my refactoring in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="15792495" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/115" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/115/hovercard" href="https://github.com/facebook/react/pull/115">#115</a>, this will never increment twice, which is probably confusing.</p>
<p dir="auto">Maybe this isn't a bug. We can fix this behavior by instead updating this.state immediately (but still updating the UI later). Right now I can't think of any situations where having this.state out of sync with the UI is a problem.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vjeux/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vjeux">@vjeux</a> suggested I open an issue, so here I am. Probably easiest for me to fix while updating <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="15792495" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/115" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/115/hovercard" href="https://github.com/facebook/react/pull/115">#115</a> though.</p>