title: After a render of not showing a child, the child state data was gone completely when it render again. Why's that and how to prevent it happening?
body: <p>In my parent component, there is a button to control whether to show the child or not.</p>
  <p>In the input box, the input value is stored inside child component. When value is input, everything seem fine, data is recorded very fine in the child's state.</p>
  <p>1.
  <a href="https://i.stack.imgur.com/UrIhT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UrIhT.png" alt="enter image description here" /></a></p>
  <ol start="2">
  <li><p>click to not show it
  <a href="https://i.stack.imgur.com/0OC87.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0OC87.png" alt="enter image description here" /></a></p>
  </li>
  <li><p>click to show again
  <a href="https://i.stack.imgur.com/4zlWk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4zlWk.png" alt="enter image description here" /></a></p>
  </li>
  </ol>
  <p>Child's input box value was gone, and the state value in child was gone as well.</p>
  <p>How can I keep the value when I click to show the child again?</p>
  <p>In parent:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import Child1 from &quot;./child&quot;;
  
  import &quot;./styles.css&quot;;
  
  function Parent() {
    const [message, setMessage] = useState(&quot;initial text&quot;);
    const [showChild,setShowChild] = useState(true);
    useEffect(() =&gt; {
      console.log(&quot;useeffect in parent&quot;);
    });
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;button onClick={() =&gt; setShowChild(!showChild)}&gt;show child&lt;/button&gt;
        {showChild? 
        &lt;Child1 /&gt;
        :
        null
        
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;Parent /&gt;, rootElement);
  </code></pre>
  <p>In child:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  
  function Child1() {
    useEffect(() =&gt; {
      console.log(&quot;useeffect in child&quot;);
      console.log(&quot;newMessage: &quot; + newMessage);
    });
    const [newMessage, setNewMessage] = useState(&quot;&quot;);
  
  
    return (
      &lt;div&gt;
        &lt;input onChange={(event) =&gt; setNewMessage(event.target.value)} /&gt;
      &lt;/div&gt;
    );
  }
  
  export default Child1;
  </code></pre>