title: Getting responses from two interdependent JSON generates an error [React Hooks]
body: <p>I want to download the data first about the city in which the user is located from <strong>ipstack.com</strong> and then use this information to generate the weather using <strong>openweather.com</strong>. However, the following problem occurs during render:</p>
  <pre><code>Test.js:20 GET https://api.openweathermap.org/data/2.5/weather?lat=undefined&amp;lon=undefined&amp;units=metric&amp;appid=(MY API KEY) 400 (Bad Request)
  </code></pre>
  <p>The problem is strange because the data I require appears in state eventually:</p>
  <p><a href="https://i.stack.imgur.com/HIbrU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HIbrU.png" alt="enter image description here" /></a></p>
  <p>My code:</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  
  const Test = () =&gt; {
      const [place, setPlace] = useState([]);
      const [weather, setWeather] = useState([]);
      const [loading, setLoading] = useState(false);
  
      useEffect(() =&gt; {
          setLoading(false)
          fetch(`http://api.ipstack.com/check?access_key=(MY API KEY)`)
              .then(result =&gt; result.json())
              .then(json =&gt; {
                  setPlace([json.latitude, json.longitude, json.region_name])
              })
              .catch(err =&gt; {
                  console.log(&quot;Error &quot; + err);
              })
      }, [])
      useEffect(() =&gt; {
          fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${place[0]}&amp;lon=${place[1]}&amp;units=metric&amp;appid=(MY API KEY)`)
              .then(result =&gt; result.json())
              .then(json =&gt; {
                  setWeather(json)
              })
              .catch(err =&gt; {
                  console.log(&quot;Error &quot; + err);
                  setLoading(true);
              })
      }, [place])
      return (
          &lt;&gt;
              {loading &amp;&amp; (
                  &lt;&gt;
                      &lt;p&gt;{place[0]}&lt;/p&gt;
                      &lt;p&gt;{place[1]}&lt;/p&gt;
                      &lt;p&gt;{place[2]}&lt;/p&gt;
                      &lt;p&gt;{weather.name}&lt;/p&gt;
                  &lt;/&gt;
              )}
          &lt;/&gt;
     );
  }
  
  export default Test;
  </code></pre>