<pre class="shiki github-dark shaku"><code>// mountingAppABCD// state updatedAB</code></pre>
<h2>Explanation</h2>
<h4>1. When triggering setState in a component, it can cause this component and its child components to be re-rendered.</h4>
From the above code, we can see that when we trigger setState in component A, component A will be re-rendered, which does not affect the parent component App of A, nor does it affect sibling component D.
<h4>2. Avoid re-rendering child components: props.children</h4>
Since A's children components are inherited from its parent component through <code>props.children</code>, A's re-rendering will not cause the inherited children components to be re-rendered.
For example, components C and D are passed to A's through App as props.children. When A is re-rendered, its props have not changed, so components C and D are not rendered.
But why does B component re-render, affected by state changes in A?
<h4>3. Re-render and components that share the same context</h4>
In fact, A changes its state and modifies MyContext as well. Modifying MyContext in A will cause all components that share the same context to re-render.
This is why even if B component is passed to A as props.children, its will re-renders as it shares the same context with A, "MyContext".
<h4>4. To test your understanding, you can take a look at this case:</h4>
<pre class="shiki github-dark shaku"><code>import React, { useState, useEffect } from 'react'import ReactDOM from 'react-dom'function A({ children }) { console.log('A') return children}function B() { console.log('B') return &lt;C/&gt;}function C() { console.log('C') return null}function D() { console.log('D') return null}function App() { const [state, setState] = useState(0) useEffect(() =&gt; { setState(state =&gt; state + 1) }, []) console.log('App') return ( &lt;div&gt; &lt;A&gt;&lt;B/&gt;&lt;/A&gt; &lt;D/&gt; &lt;/div&gt; )}const root = ReactDOM.createRoot(document.getElementById('root'));root.render(&lt;App/&gt;)</code></pre>
<h3>Answer</h3>
<pre class="shiki github-dark shaku"><code>// mountingApp ABCD// state updatedAppABCD</code></pre>
B and C were re-rendered because A's parent component re-rendered, resulting in a new prop.children for A.
Note: React uses shallow comparison to detect whether props are changed or not. So even if we have not see real changes made to props of A, React still considers that it has props changes. For example, the reference value of props.children is changed.
<h3>Reference</h3>
<a href="https://github.com/flaming-cl/react-pro-tips/blob/main/README.md">Pro Tips to Unleash the Power of React</a>

Detailed explanation

What does the code snippet to the right output by console.log?…