title: React useEffect loads a component twice
body: <p>I am having some issues when loading a container component. The component is fetching data from a API and then sends the data to a stateless component via props. The issue i am facing is that the container component loads twice. On the first load the data is empty and on the second load the data is there. I am getting a error when the stateless components gets loaded without any data, because it is expecting data. I have put an if statement in my code that checks if the data is loaded and this works, but i was wondering if there is way to do it without using the if statement.</p>
  <p>I am using redux, redux thunks and axios.</p>
  <p>container component</p>
  <pre><code>  useEffect(() =&gt; {
      // load articles only once
      if (isObjectEmpty(props.article)) {
        props.loadArticles().catch(error =&gt; {
          console.log(&quot;Loading articles failed&quot; + error);
        });
      }
    }, []);
  </code></pre>
  <pre><code>  // only load the component when we have data
    if (isObjectEmpty(props.article)) {
      return null;
    }
    return (
      &lt;&gt;
        &lt;Section&gt;
          &lt;PostPopulairSection articles={props.popularArticles} /&gt;
        &lt;/Section&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>The error i am getting from the stateless component:
  <a href="https://i.stack.imgur.com/W3b4s.png" rel="nofollow noreferrer">Error</a></p>