title: How to prevent a react component remount because of wrapper added/removed
body: <p>Consider the following example:</p>
  <pre><code>const SomeComponent = ({ id }) =&gt; {
    useEffect(() =&gt; {
      console.log(&quot;mounted&quot;, id);
    }, []);
  
    return null;
  };
  
  const App = () =&gt; {
    const [outside, setOutside] = useState(false);
  
    const component = &lt;SomeComponent id=&quot;willrerender&quot; key=&quot;willrerender&quot; /&gt;;
    const otherComponent = &lt;SomeComponent id=&quot;wontrerender&quot; key=&quot;wontrerender&quot; /&gt;;
  
    const handleClick = () =&gt; {
      setOutside((outside) =&gt; {
        console.log(&quot;setting&quot;, outside ? &quot;outside&quot; : &quot;inside&quot;);
        return !outside;
      });
    };
  
    return (
      &lt;div&gt;
        &lt;button onClick={handleClick}&gt;trigger&lt;/button&gt;
        {outside ? component : &lt;div&gt;{component}&lt;/div&gt;}
        {otherComponent}
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>And <a href="https://codesandbox.io/s/react-playground-forked-ysnoi?file=/index.js:0-826" rel="nofollow noreferrer">playground link</a>.</p>
  <p>I was expecting that the component (<code>SomeComponent</code> in this case) won't remount just because it's wrapped in an another component (<code>div</code> in this case) - but only update. I would like to prevent this from happening.</p>
  <p>The above example shows that if you click the button, it will make <code>willrerender</code> remount, while <code>wontrerender</code> won't rerender.</p>
  <p>How could I do that the component &quot;stays&quot; the same (doesn't remount, keeps state) regardless of its parent?</p>