title: how to use React.memo with a Component contains children
body: <p>I have two Components, and I wrapped Parent with <code>React.memo</code>:</p>
  <p>Child</p>
  <pre><code>const Child = ()=&gt; &lt;div&gt;I'm Child&lt;/div&gt;
  
  export default Child
  </code></pre>
  <p>Parent</p>
  <pre><code>const Parent = (props)=&gt; &lt;div&gt;{props.children}&lt;/div&gt;
  
  export default React.memo(Parent)
  </code></pre>
  <h2>Use in App:</h2>
  <pre><code>const App = () =&gt; {
    const [count, setCount] = useState(0)
  
    return(
      &lt;div&gt;
        &lt;button onClick={()=&gt;setCount(count+1)}&gt;&lt;/button&gt;
  
        &lt;Parent&gt;
          &lt;Child&gt;&lt;/Child&gt;
        &lt;/Parent&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <h2>Click the button, result:</h2>
  <p>The Parent Component will rerender, so the memo not working because it's children is a function component</p>
  <h2>So, how can I prevent rerender?</h2>
  <p>I know a way to solve by useMemo, but it's ugly and not friendly, do you have better ideas?</p>
  <pre><code>const App = () =&gt; {
    const [count, setCount] = useState(0)
  
    const children = useMemo(()=&gt;&lt;Child&gt;&lt;/Child&gt;,[])
  
    return(
      &lt;div&gt;
        &lt;button onClick={()=&gt;setCount(count+1)}&gt;&lt;/button&gt;
  
        &lt;Parent&gt;
          {children}
        &lt;/Parent&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>