title: React use useEffect to load data asynchronously
body: <p>I have a parent component that has a child component inside it which loaded data asynchronously currently I have:</p>
  <pre><code>&lt;Parent&gt; 
    &lt;AsyncChild data={props.data} /&gt;
    &lt;Child /&gt;
  &lt;/Parent&gt;
  </code></pre>
  <p>Inside my <code>AsyncChild</code> component I have:</p>
  <pre><code>const processDataAsynchronously = data =&gt; {
        // do stuff with a huge chunk of data
  } 
  
  export default function AsyncChild(props) {
  
      const data = props.data;
      const [dataLoaded, setDataLoaded] = useState(false);
      const [myData, setMyData] = useState({});
  
      useEffect(() =&gt; {
          let mounted = true;
          processDataAsynchronously(data);
          .then(data =&gt; {
              if(mounted) {
                  setMyData(data);
                  setDataLoaded(true);
              }
          });  
          return () =&gt; {
              mounted = false;
          }   
         }, [data])
  
      const getComponentData = () =&gt; {
          if(dataLoaded &amp;&amp; !myData){ 
              // if data has loaded and is empty return empty
              return &lt;span /&gt;
          } else if (!myData &amp;&amp; !dataLoaded)  { 
              // if data is empty and loading is not complete - return loading component
              return &lt;Loader /&gt;;
          } else {
              return (
                  // return style data
              )
          }      
      }
  
      return (
          &lt;div&gt;
              {getComponentData()}
          &lt;/div&gt;  
      )
  } 
  </code></pre>
  <p>What I want to do is to load <code>&lt;Child /&gt;</code> and while <code>&lt;AsyncChild /&gt;</code> is processing it's data asynchronously, display a loader above the <code>&lt;Child /&gt;</code> component. However, currently the loader does not display and both of the child components are displayed together. How can I do this correctly?</p>