title: useEffect not being called and not updating state when api is fetched
body: <p>I'm fetching data from a weather api using useEffect hook and declaring the dependency correctly as well. My state is still not being updated and I get errors in my render function because of that.  I've pretty much tried everything from getting rid of the dependency array to declaring multiples in the dependency array. I don't know what's wrong with my function. The API's JSON response is in this format: </p>
  
  <pre><code>{
   location: {
   name: "Paris",
   region: "Ile-de-France",
   },
   current: {
    last_updated_epoch: 1564279222,
    last_updated: "2019-07-28 04:00",
    temp_c: 16,
    temp_f: 60.8,
    is_day: 0,
    condition: {
      text: "Clear",
      icon: "//cdn.apixu.com/weather/64x64/night/113.png",
      code: 1000
    },
    wind_mph: 6.9,
    wind_kph: 11.2
   }
  }
  </code></pre>
  
  <p>and this is what my code looks like: </p>
  
  <pre><code>const Weather = ({ capital }) =&gt; {
    const [weather, setWeather] = useState(null);
  
    useEffect(() =&gt; {
      console.log("useEffect called");
      const getWeather = async () =&gt; {
        try {
          const res = await axios.get(
            `http://api.apixu.com/v1/current.json?key=53d601eb03d1412c9c004840192807&amp;q=${capital}`
          );
          setWeather(res.data);
        } catch (e) {
          console.log(e);
        }
      };
      getWeather();
    }, [capital]);
    console.log(weather);
  
    return (
      &lt;Card style={{ width: "18rem", marginTop: "25px" }}&gt;
        &lt;Card.Img variant="top" src={weather.current.condition.icon} /&gt;
  
        &lt;Card.Header style={{ textAlign: "center", fontSize: "25px" }}&gt;
          Weather in {capital}
        &lt;/Card.Header&gt;
      &lt;/Card&gt;
    )
  }
  </code></pre>
  
  <p>I expect to get to be shown image of the icon but I get this error message in my render function:</p>
  
  <pre><code>TypeError: Cannot read property 'current' of null
  Weather
  src/components/Weather.js:26
    23 | 
    24 | return (
    25 |   &lt;Card style={{ width: "18rem", marginTop: "25px" }}&gt;
    26 |     &lt;Card.Img variant="top" src={weather.current.condition.icon} /&gt;
       | ^  27 | 
    28 |     &lt;Card.Header style={{ textAlign: "center", fontSize: "25px" }}&gt;
    29 |       Weather in {capital}
  </code></pre>
  
  <p>and my <code>console.log(weather)</code> return null, the original state even though its being called after useEffect() and <code>console.log(useEffect called)</code> does not log at all which mean useEffect is not being called.</p>