title: React UseEffect is being calling twice
body: <p>I have the following code in FC component:</p>
  
  <p><strong>I just want to call the Api and Log the info when the component is mounted</strong></p>
  
  <p>The console.log is being called twice for empty array and twice for setting the same values. </p>
  
  <pre><code>import * as React from"react";
  import Header from"../components/Header";
  import Search from"../components/Search";
  import Categories from"../components/Categories";
  import Carousel from"../components/Carousel";
  import CarouselItem from"../components/CarouselItem";
  import Footer from"../components/Footer";
  import "../assets/styles/App.scss";
  
  const App = () =&gt; {
    const [videos, setVideos] = React.useState([]);
  
    React.useEffect(() =&gt; {
      fetch("http://localhost:3000/initalState")
        .then((response) =&gt; response.json())
        .then((data) =&gt; setVideos(data));
    }, []);
  
    console.log(videos);
    return (
      &lt;div className="App"&gt;
        &lt;Header&gt;&lt;/Header&gt;
        &lt;Search&gt;&lt;/Search&gt;
  
        &lt;Categories title="Mi Lista"&gt;
          &lt;Carousel&gt;
            &lt;CarouselItem /&gt;
            &lt;CarouselItem /&gt;
            &lt;CarouselItem /&gt;
            &lt;CarouselItem /&gt;
            &lt;CarouselItem /&gt;
          &lt;/Carousel&gt;
        &lt;/Categories&gt;
  
        &lt;Categories title="Tendencias"&gt;
          &lt;Carousel&gt;
            &lt;CarouselItem /&gt;
            &lt;CarouselItem /&gt;
          &lt;/Carousel&gt;
        &lt;/Categories&gt;
  
        &lt;Categories title="Originales de Platzi Video"&gt;
          &lt;Carousel&gt;
            &lt;CarouselItem /&gt;
          &lt;/Carousel&gt;
        &lt;/Categories&gt;
  
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  
  <p>However, i got the following output:</p>
  
  <p><a href="https://i.stack.imgur.com/qm74M.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qm74M.png" alt="enter image description here"></a></p>
  
  <p>Calling within useEffect:</p>
  
  <pre><code>  React.useEffect(() =&gt; {
      fetch("http://localhost:3000/initalState")
        .then((response) =&gt; response.json())
        .then((data) =&gt; {
          setVideos(data);
          console.log(videos);
        });
    }, []);
  </code></pre>
  
  <p>returns an empty array.</p>