title: React render component only for few seconds
body: <p>In my existing react component, I need to render another react component for a specific time period.
  As soon as the parent component mounts/or data loads, the new-component (or child component) should be visible after 1-2 seconds and then after another few seconds, the new-component should be hidden. This needs to be done only if there is no data available.</p>
  <p>This is what currently I've tried to achieve:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  function App() {
    const [showComponent, setShowComponent] = useState(false);
    const sampleData = [];
  
    useEffect(() =&gt; {
      if (sampleData.length === 0) {
        setTimeout(() =&gt; {
          setShowComponent(true);
        }, 1000);
      }
    }, [sampleData]);
  
    useEffect(() =&gt; {
      setTimeout(() =&gt; {
        setShowComponent(false);
      }, 4000);
    }, []);
  
    const componentTwo = () =&gt; {
      return &lt;h2&gt;found error&lt;/h2&gt;;
    };
  
    return &lt;&gt;First component mounted{showComponent &amp;&amp; componentTwo()}&lt;/&gt;;
  }
  
  export default App;
  </code></pre>
  <p>The current implementation is not working as expected. The new-component renders in a blink fashion.</p>
  <p>Here is the working snippet attached:</p>
  <p>Any help to resolve this is appreciated!</p>