why is react’s useeffect hook not called here before the function returns?

This is because the call to the api is asynchronous, which means that the code will continue to execute whilst the fetch happens in the background, when a response is returned it will then callback in the .then() part of the effect.

A common practice is to show a placeholder whilst loading data:

const CityWeather = ({ city }) => {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    axios
      .get(
        `http://api.weatherapi.com/v1/current.json` +
          `?key=${process.env.REACT_APP_MY_SUPER_SECRET_WEATHER_API_KEY}` +
          `&q=${city}`,
      )
      .then((response) => {
        console.log(`response is ${JSON.stringify(response)}`);
        setWeather(response.data);
      });
  }, [city]);

  console.log(`The value of the weather var is ${JSON.stringify(weather)}`);
  return (
    <div>
      {!weather ? (
        <h3>Loading the weather!</h3>
      ) : (
        <>
          <h2>Weather in {city}</h2>
          <p>temperature: {weather.current.temp_c} Celsius</p>
          <img src={weather.current.condition.icon} alt="weather forecast" />
          <p>wind speed: {weather.current.wind_mph} mph</p>
          <p>wind dir.: {weather.current.wind_dir}</p>
        </>
      )}
    </div>
  );
};

(Also, I noticed you defaulted weather to an array ([]) which is probably causing other issues)

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top