<p dir="auto">I don't know if this would come under feature request or a bug or if this is just expected and things should be handled differently in shouldComponentUpdate.</p>
<p dir="auto">Current behaviour : If A is a component which renders B and passes C as children to B. Now if A re-renders for some state change of which no part is passed to B or C so basically nothing changes in the subtree of B. B still always re-renders.</p>
<p dir="auto"><a href="https://jsfiddle.net/7utuxyfp/1/" rel="nofollow">https://jsfiddle.net/7utuxyfp/1/</a></p>
<p dir="auto">this is the fiddle to reproduce this issue. Click on C to make state change in A and B re-renders.</p>
<p dir="auto">Here the effect is not much but in some cases children is passed some level deep and can cause un-necessary re-renders.</p>
<p dir="auto">this is in React-16 and previous versions.</p>
<p dir="auto"><a href="https://stackoverflow.com/questions/46660619/react-children-rendering-procedure" rel="nofollow">https://stackoverflow.com/questions/46660619/react-children-rendering-procedure</a></p>
<p dir="auto">this is a question where some of the observations are posted feel free to answer there only if this is expected or should be handled in a different way. :)</p>
<p dir="auto">React's shouldComponentUpdate based performance improvements work great for improving the performance of medium-weight components with large numbers of instances. They even work well with event handlers, as you can ignore event handler changes and instead pass a locally bound method that'll access <code class="notranslate">this.props.on*</code> on demand. However this all fails apart you start passing react elements to pure components.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="'use strict';
import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import shallowEqual from 'recompose/shallowEqual';
// shallowEqualExcluding: Fictional function that works like shallowEqual, but ignores changes to a list of props passed as the third argument

class Button extends Component {
    static propTypes = {
        icon: PropTypes.node.isRequired,
        onClick: PropTypes.func
    };

    onClick = (e) =&gt; {
        this.props.onClick(e);
    };

    shouldComponentUpdate(nextProps) {
        // @note Doesn't actually work
        return shallowEqualExcluding(this.props, nextProps, ['onClick']);
    }

    render() {
        const {icon} = this.props;

        return (
            &lt;button onClick={this.onClick}&gt;
                {icon}
                {/*React.cloneElement(icon, {ref: (icon) =&gt; this.iconRef = icon})*/}
            &lt;/button&gt;
        );
    }
}

class Icon extends Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        color: PropTypes.string
    };

    shouldComponentUpdate(nextProps) {
        return shallowEqual(this.props, nextProps);
    }

    render() {
        const {name, color} = this.props;
        return getSvgIcon(name, color);
    }
}

const nilClick = () =&gt; {};
ReactDOM.render(&lt;Button onClick={() =&gt; alert('Clicked!')} icon={&lt;Icon name='done'} /&gt;, document.querySelector('#container'));
ReactDOM.render(&lt;Button onClick={nilClick} icon={&lt;Icon name='done'} /&gt;, document.querySelector('#container')); // 2nd invovation
ReactDOM.render(&lt;Button onClick={nilClick} icon={&lt;Icon name='cancel'} /&gt;, document.querySelector('#container')); // 3rd invovation"><pre class="notranslate"><span class="pl-s">'use strict'</span><span class="pl-kos">;</span>
<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-v">PropTypes</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">import</span> <span class="pl-s1">shallowEqual</span> <span class="pl-k">from</span> <span class="pl-s">'recompose/shallowEqual'</span><span class="pl-kos">;</span>
<span class="pl-c">// shallowEqualExcluding: Fictional function that works like shallowEqual, but ignores changes to a list of props passed as the third argument</span>

<span class="pl-k">class</span> <span class="pl-v">Button</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
    <span class="pl-k">static</span> <span class="pl-c1">propTypes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
        <span class="pl-c1">icon</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span><span class="pl-kos">,</span>
        <span class="pl-c1">onClick</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">func</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-c1">onClick</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <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-en">onClick</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-en">shouldComponentUpdate</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-c">// <span class="pl-k">@note</span> Doesn't actually work</span>
        <span class="pl-k">return</span> <span class="pl-en">shallowEqualExcluding</span><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-s1">nextProps</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'onClick'</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</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">const</span> <span class="pl-kos">{</span>icon<span class="pl-kos">}</span> <span class="pl-c1">=</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-k">return</span> <span class="pl-kos">(</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">onClick</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                <span class="pl-kos">{</span><span class="pl-s1">icon</span><span class="pl-kos">}</span>
                <span class="pl-kos">{</span><span class="pl-c">/*React.cloneElement(icon, {ref: (icon) =&gt; this.iconRef = icon})*/</span><span class="pl-kos">}</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</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-k">class</span> <span class="pl-v">Icon</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
    <span class="pl-k">static</span> <span class="pl-c1">propTypes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
        <span class="pl-c1">name</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">string</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span><span class="pl-kos">,</span>
        <span class="pl-c1">color</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">string</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-en">shouldComponentUpdate</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-en">shallowEqual</span><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-s1">nextProps</span><span class="pl-kos">)</span><span class="pl-kos">;</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">const</span> <span class="pl-kos">{</span>name<span class="pl-kos">,</span> color<span class="pl-kos">}</span> <span class="pl-c1">=</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-k">return</span> <span class="pl-en">getSvgIcon</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">,</span> <span class="pl-s1">color</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-en">nilClick</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</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-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-c1">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-v">Button</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-s">'Clicked!'</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-s1">icon</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">Icon</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">'done'</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</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-kos">;</span>
<span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-c1">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-v">Button</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">nilClick</span><span class="pl-kos">}</span> <span class="pl-s1">icon</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">Icon</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">'done'</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</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-kos">;</span> <span class="pl-c">// 2nd invovation</span>
<span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-c1">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-v">Button</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">nilClick</span><span class="pl-kos">}</span> <span class="pl-s1">icon</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">Icon</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">'cancel'</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</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-kos">;</span> <span class="pl-c">// 3rd invovation</span></pre></div>
<p dir="auto">Given this sample; A <code class="notranslate">&lt;Button /&gt;</code> component that expects an icon to be passed as an <code class="notranslate">icon</code> prop and a simple <code class="notranslate">&lt;Icon /&gt;</code>. Both are pure components and Button is also coded to not re-render when<code class="notranslate">onClick</code> is changed. Pretend that Button actually has a heavy <code class="notranslate">render()</code> but its props and state don't change frequently.</p>
<p dir="auto">On the second invocation, Icon should not require any prop change or render and Button should have its <code class="notranslate">onClick</code> prop changed but not require a render.<br>
On the third invocation, Icon should require a render while Button itself does not need to render except for the change to Icon.</p>
<p dir="auto">However in practice Button will always re-render, including during the second invocation when nothing changes.</p>
<p dir="auto">This is because <code class="notranslate">&lt;Icon /&gt;</code> will always result in a new instance and will never be the same.</p>
<p dir="auto">Normally you could work around this within the component itself, without telling users they have to store <code class="notranslate">&lt;Icon /&gt;</code> in a variable until they think they need to change its props; for functions you could pass a function that will use <code class="notranslate">this.props.*</code> itself and for objects you can do a deep comparison if you know the structure of the object. But for react elements, even though <code class="notranslate">shouldComponentUpdate</code> allows React to know if the current component has a render dependency on a sub-component, you do not have access to this information so Button cannot tell if Icon requires a render.</p>
<p dir="auto">In practice this can turn out to be a problem when you're writing some libraries rather than an application. Notably <a href="http://www.material-ui.com/" rel="nofollow">Material UI</a> suffers from this problem in production. <code class="notranslate">EnhancedSwitch</code>'s <code class="notranslate">render()</code> is not light; <code class="notranslate">EnhancedSwitch</code> is used by <code class="notranslate">RadioButton</code> and <code class="notranslate">Checkbox</code>; both use a <code class="notranslate">checkedIcon</code> and <code class="notranslate">uncheckedIcon</code> React element prop; you can reasonably have 100 checkboxes on one page; even if they were pure, they cannot identify whether an icon requires an update; as a result, a render of the component containing the checkboxes to check a single checkbox will result in the <code class="notranslate">render()</code> of all 100 <code class="notranslate">EnhancedSwitch</code> instances.</p>
<p dir="auto">I can think of a few ideas on what type of API could be added to React to solve this issue.</p>
<h2 dir="auto">shouldComponentUpdate helper</h2>
<p dir="auto">The most obvious API would be a top-level React function that given the instance context, old ReactElement, and new ReactElement would return the result of a Component's <code class="notranslate">shouldComponentUpdate</code>. Then heavy parent components can use that to implement a <code class="notranslate">shouldComponentUpdate</code> that is aware of render dependencies in its children.<br>
(As a bonus, theoretically you could temporarily remember this while you're walking the current tree; then instead of calling <code class="notranslate">shouldComponentUpdate</code> multiple times for every (potentially nested) component the result is simply that <code class="notranslate">shouldComponentUpdate</code> calls are raised up to the highest level where a component is render-dependent on them)</p>
<p dir="auto"><code class="notranslate">React.shouldComponentUpdate(this, this.props.icon, nextProps.icon)</code></p>
<p dir="auto">However I expect the problem we have with this is that <code class="notranslate">shouldComponentUpdate</code> is also responsible for state dependent updates and <code class="notranslate">this</code> is supposed to be a rendered instance, not a ReactElement instance. While you know <code class="notranslate">context</code> from passing the current instance, you do not have a reference to the state from either of the props.</p>
<h2 dir="auto">ref based shouldComponentUpdate helper</h2>
<p dir="auto">The second most obvious API would be a <code class="notranslate">shouldComponentUpdate</code> helper that instead uses a ref.</p>
<p dir="auto"><code class="notranslate">React.shouldComponentUpdate(this.iconRef, nextProps.icon)</code></p>
<p dir="auto">The downside to this is that to get a ref for a component you didn't create, you inevitably have to use <code class="notranslate">React.cloneElement</code>.</p>
<h2 dir="auto">render passthrough</h2>
<p dir="auto">The next idea I had was a render passthrough. A way during the render process for a component to say "I do not need a render()/update, but these children of mine may" which would tell React to skip render() and then run <code class="notranslate">shouldComponentUpdate</code> on the instances deeper in the tree.</p>
<p dir="auto">However those components only know if they need updates if you pass them the new props; so a passthrough won't work. We'd instead need a way to tell react that it should not run <code class="notranslate">render()</code> but do pass on an update to a specific component instance</p>
<p dir="auto"><code class="notranslate">this.renderRef(this.iconRef, nextProps.icon);</code></p>
<p dir="auto">The advantage of this over using <code class="notranslate">shouldComponentUpdate</code> is that instead of only allowing medium components wrapping light components to only <code class="notranslate">render()</code> when a child requires it; we also allow heavy components to never <code class="notranslate">render()</code> unless they themselves require it, while still allowing them to permit their light children to update.</p>
<h1 dir="auto">partial renders</h1>
<p dir="auto">That <code class="notranslate">shouldComponentUpdate</code> based <code class="notranslate">renderRef</code> only applying updates to a component child feels somewhat awkward and forced though. So a more robust idea might be a partial render lifecycle that optionally runs when <code class="notranslate">shouldComponentUpdate =&gt; false</code> and can call for the render of a sub-tree that belongs to the current component.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class HeavyComponent extends Component {
    shouldComponentUpdate(nextProps) {
        // Ignore icon and children
        return nextProps.text !== this.props.text;
    }

    render() {
        const {text, icon, children} = this.props;

        text = doSomethingAbsurdlyCpuIntensiveAndHardToFactorOutOfThisComponent(text);

        return (
            &lt;div&gt;
                &lt;h2&gt;
                    {React.cloneElement(icon, {ref: (icon) =&gt; this.iconRef = icon})}
                    {text}
                &lt;/h2&gt;
                &lt;Wrapper ref='subtree'&gt;
                    {children}
                &lt;/Wrapper&gt;
        );
    }

    componentSkippedRender(nextProps/*, nextState*/) {
        this.subRender(this.iconRef, React.cloneElement(icon, {ref: (icon) =&gt; this.iconRef = icon}));

        this.subRender(
            this.refs.subtree,
            &lt;Wrapper ref='subtree'&gt;
                {children}
            &lt;/Wrapper&gt;
        );
    }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">HeavyComponent</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
    <span class="pl-en">shouldComponentUpdate</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-c">// Ignore icon and children</span>
        <span class="pl-k">return</span> <span class="pl-s1">nextProps</span><span class="pl-kos">.</span><span class="pl-c1">text</span> <span class="pl-c1">!==</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">text</span><span class="pl-kos">;</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">const</span> <span class="pl-kos">{</span>text<span class="pl-kos">,</span> icon<span class="pl-kos">,</span> children<span class="pl-kos">}</span> <span class="pl-c1">=</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-s1">text</span> <span class="pl-c1">=</span> <span class="pl-en">doSomethingAbsurdlyCpuIntensiveAndHardToFactorOutOfThisComponent</span><span class="pl-kos">(</span><span class="pl-s1">text</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">h2</span><span class="pl-c1">&gt;</span>
                    <span class="pl-kos">{</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">cloneElement</span><span class="pl-kos">(</span><span class="pl-s1">icon</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-en">ref</span>: <span class="pl-kos">(</span><span class="pl-s1">icon</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">iconRef</span> <span class="pl-c1">=</span> <span class="pl-s1">icon</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
                    <span class="pl-kos">{</span><span class="pl-s1">text</span><span class="pl-kos">}</span>
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">Wrapper</span> <span class="pl-c1">ref</span><span class="pl-c1">=</span><span class="pl-s">'subtree'</span><span class="pl-c1">&gt;</span>
                    <span class="pl-kos">{</span><span class="pl-s1">children</span><span class="pl-kos">}</span>
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Wrapper</span><span class="pl-c1">&gt;</span>
        );
    <span class="pl-kos">}</span>

    <span class="pl-s1">componentSkippedRender</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-c">/*, nextState*/</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">subRender</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">iconRef</span><span class="pl-kos">,</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">cloneElement</span><span class="pl-kos">(</span><span class="pl-s1">icon</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-en">ref</span>: <span class="pl-kos">(</span><span class="pl-s1">icon</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">iconRef</span> <span class="pl-c1">=</span> <span class="pl-s1">icon</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">subRender</span><span class="pl-kos">(</span>
            <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">refs</span><span class="pl-kos">.</span><span class="pl-c1">subtree</span><span class="pl-kos">,</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">Wrapper</span> <span class="pl-c1">ref</span><span class="pl-c1">=</span><span class="pl-s">'subtree'</span><span class="pl-c1">&gt;</span>
                <span class="pl-kos">{</span><span class="pl-s1">children</span><span class="pl-kos">}</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Wrapper</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">Though <code class="notranslate">this.subRender</code> probably has potential for conflicts, so I expect the most react-line way to name that would be something like <code class="notranslate">React.renderSubtreeIntoComponent(parentComponent, nextElement, component)</code> which would be invoked using <code class="notranslate">React.renderSubtreeIntoComponent(this, /* subtree */, this.refs.subtree);</code>.</p>
<p dir="auto">The <code class="notranslate">&lt;Wrapper&gt;</code> I used would be a really light component that probably would just render its children. It's there because <code class="notranslate">React.renderSubtreeIntoComponent</code> should probably not accept dom refs; this should be part of React lifecycle/walker, not part of client side browser only react-dom like <code class="notranslate">ReactDOM.unstable_renderSubtreeIntoContainer</code>.</p>