title: Is it safe to useMemo for JSX?
body: <p>I'm trying to do a memoize <code>Modal</code> and I have a problem here.</p>
  <p>When I change input I dont need to re-render the Modal component.</p>
  <p><strong>For example:</strong></p>
  <p><code>Modal.tsx</code> looks like this:</p>
  <pre><code>import React from &quot;react&quot;;
  import { StyledModalContent, StyledModalWrapper, AbsoluteCenter } from &quot;../../css&quot;;
  
  interface ModalProps {
    open: boolean;
    onClose: () =&gt; void;
    children: React.ReactNode
  };
  
  const ModalView: React.FC&lt;ModalProps&gt; = ({ open, onClose, children }) =&gt; {
    console.log(&quot;modal rendered&quot;);
    
    return (
      &lt;StyledModalWrapper style={{ textAlign: &quot;center&quot;, display: open ? &quot;block&quot; : &quot;none&quot; }}&gt;
        &lt;AbsoluteCenter&gt;
          &lt;StyledModalContent&gt;
            &lt;button
              style={{
                position: &quot;absolute&quot;,
                cursor: &quot;pointer&quot;,
                top: -10,
                right: -10,
                width: 40,
                height: 40,
                border: 'none',
                boxShadow: '0 10px 10px 0 rgba(0, 0, 0, 0.07)',
                backgroundColor: '#ffffff',
                borderRadius: 20,
                color: '#ba3c4d',
                fontSize: 18
              }}
              onClick={onClose}
            &gt;
              X
            &lt;/button&gt;
            {open &amp;&amp; children}
          &lt;/StyledModalContent&gt;
        &lt;/AbsoluteCenter&gt;
      &lt;/StyledModalWrapper&gt;
    );
  };
  
  export default React.memo(ModalView);
  
  </code></pre>
  <p>Here is an example of how I wrap it.</p>
  <pre><code>import React from 'react'
  import Modal from './modal';
  
  const App: React.FC&lt;any&gt; = (props: any) =&gt; {
    const [test, setTest] = React.useState(&quot;&quot;);
    const [openCreateChannelDialog, setOpenCreateChannelDialog] = React.useState(false);
      
    const hideCreateModalDialog = React.useCallback(() =&gt; {
      setOpenCreateChannelDialog(false);
    }, []);
  
    return (
      &lt;&gt;
        &lt;input type=&quot;text&quot; value={test} onChange={(e) =&gt; setTest(e.target.value)} /&gt;
        &lt;button onClick={() =&gt; setOpenCreateChannelDialog(true)}&gt;Create channel&lt;/button&gt;
      
        &lt;Modal
          open={openCreateChannelDialog}
          onClose={hideCreateModalDialog}
          children={&lt;CreateChannel onClose={hideCreateModalDialog} /&gt;}
        /&gt;
      &lt;/&gt;
  };
  </code></pre>
  <p>I know, <code>Modal</code> re-rendered because <code>children</code> reference created every time when <code>App</code> component re-renders (when I change an input text).</p>
  <p>Know I'm interested, if I wrap <code>&lt;CreateChannel onClose={hideCreateModalDialog} /&gt;</code> inside React.useMemo() hook</p>
  <p><strong>For example:</strong></p>
  <pre><code>  const MemoizedCreateChannel = React.useMemo(() =&gt; {
      return &lt;CreateChannel onClose={hideCreateModalDialog} /&gt;
    }, [hideCreateModalDialog]);
  
  </code></pre>
  <p>And change children props inside <code>Modal</code></p>
  <p>from:</p>
  <pre><code>children={&lt;CreateChannel onClose={hideCreateModalDialog} /&gt;}
  </code></pre>
  <p>to</p>
  <pre><code>children={MemoizedCreateChannel}
  </code></pre>
  <p>It works fine, but is it safe? And it is only one solution that tried to memoize a Modal?</p>