title: how to handle delay with setting useState with API data
body: <p>I am not the first one to have this problem.
  <br>
  but sadly, nothing of what i saw is working for me.
  <br>
  I wanna get data from API.
  use the data to call another API.
  <br>
  and than return the data in <p> or whatever.
  <br>
  so what happens is, the first fetch is going fine. im trying to set it inside a state.
  <br>
  but when the SECOND API runs, the STATE i need, is still empty... it hasnt been updated.
  <br>
  so the component cant render something that doesnt exist. so it crashes.
  <br>
  and also, something here causes multiple renders... <br>
  here is the code:</p>
  <pre><code>const SecondDisplay = () =&gt; {
  
      const [firstData, setFirstData] = useState(&quot;&quot;)
      const [secondData, setSecondData] = useState(&quot;&quot;)
      const [errors, setErrors] = useState(&quot;&quot;)
      const [loading, setLoading] = useState(true)
  
      useEffect(() =&gt; {
          navigator.geolocation.getCurrentPosition(function(position) {
              // getLocation(32.0853, 34.7818)
              fetch(`https://dataservice.accuweather.com/locations/v1/cities/geoposition/search?apikey=AZvK08ugMNLlAGAwDD9GQGj108Tm8OIP&amp;q=${position.coords.latitude}%2C${position.coords.longitude}&amp;language=en-us&amp;details=false&amp;toplevel=false`)
              .then(res =&gt; {
                  if(!res.ok){
                      throw Error(&quot;Sorry, something went wrong. please try again later.&quot;)
                  }
                  return res.json()
              })
              .then(data =&gt; {
                  setFirstData({key: data.Key, name: data.AdministrativeArea.EnglishName})  
              })
              .catch(error =&gt; {
                  setErrors(error.message)
                  setLoading(false)
               })
              })
            }, [])
  
  useEffect(() =&gt; {
      if(firstData !== &quot;&quot;){
          third(firstData.key)
      }
  }, [firstData])
  
  
  
  
  let third = key =&gt; {
      
      fetch(`http://dataservice.accuweather.com/currentconditions/v1/${key}?apikey=AZvK08ugMNLlAGAwDD9GQGj108Tm8OIP&amp;language=en-us&amp;details=true HTTP/1.1`)
      .then(res =&gt; {
          if(!res.ok){
              throw Error(&quot;Sorry, something went wrong. please try again later.&quot;)
          }
          return res.json()
      })
      .then(data =&gt; {
          setSecondData(data)
          setLoading(false)
      })
      .catch(error =&gt; {
      setErrors(error.message)
      setLoading(false)
      })
      }
  
  
  return(&lt;p&gt;{secondData.blabla}&lt;/p&gt;)
  </code></pre>