title: React async data fetch in useEffect
body: <p>I'm trying to load data through an asynchronous method in useEffect. I pass all the necessary dependencies and, in my understanding, useEffect should work when the component is mounted, on the first render, and when dependencies change.</p>
  <pre><code>useEffect(() =&gt; { 
          console.log('effect')
          if (ids.length === 0) {
              api.images.all().then((data) =&gt; { console.log(data); setIDs(data) }).catch(console.log)
          }
      }, [ids])
  </code></pre>
  <p>In my case it's 3 times: mount (it should load data immediately), first render (shouldn't go into if), and due to ids change (should also not go into if). But useEffect fires 4 times and loads data twice, I can't figure out why.</p>
  <p><a href="https://i.stack.imgur.com/Y23w0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y23w0.png" alt="enter image description here" /></a></p>
  <p>Component code:</p>
  <pre><code>//BuildIn
  import { useEffect, useState } from 'react'
  //Inside
  import api from '../services/api.service'
  import AsyncImage from '../components/AsyncImage.component'
  
  const ImagesPage = () =&gt; {
      const [ids, setIDs] = useState([])
  
      useEffect(() =&gt; { 
          console.log('effect')
          if (ids.length === 0) {
              api.images.all().then((data) =&gt; { console.log(data); setIDs(data) }).catch(console.log)
          }
      }, [ids])
  
      return(
          &lt;&gt;
              {(ids.length &gt; 0) ? ids.map((id, index) =&gt; &lt;AsyncImage guid={id} key={index} /&gt;) : &lt;div&gt;No data&lt;/div&gt;}
          &lt;/&gt;
      )
  }
  
  export default ImagesPage
  </code></pre>