title: Why does my data appear in the console 4 times?
body: <p>I'm trying to get data from a weather api using React hooks. When I <code>console.log</code> the data after the useEffect hook it is printed to the console 4 times, twice as an empty object. Why is that? Here is my code:</p>
  <pre><code>import React, {useState, useEffect} from 'react';
  
  
  export default function App() {
  
    const [data, setData] = useState({})
  
  
    useEffect(() =&gt; {
      fetch('https://api.weatherbit.io/v2.0/forecast/hourly?city=Chicago,IL&amp;key=XXX&amp;hours=24')
      .then(res =&gt; res.json())
      .then(response =&gt; setData(response.data))
    }, []);
  
    console.log(data)
    
    return (
      &lt;div&gt;
  
      &lt;/div&gt;
    )
  }
  
  </code></pre>
  <p>and this is what is printed in the console:</p>
  <blockquote>
  <p>{}</p>
  <p>{}</p>
  <p>(24) [{},{}...]</p>
  <p>(24) [{},{}...]</p>
  </blockquote>