Cannot assign fetched data to useState on React

Question

So I am having this issue. I am fetching data using axios and want to assign it to useState. However, all methods including the async function inside useEffect failed to do so. so the first console.log(res.data) shows all info nicely. However, the second one console.log(weather) displays an empty array. Any suggestions?

const App = () => {
  const [weather, setWeather] = useState([]);
  const [loading, setLoading] = useState(true);


  // Side effects
  useEffect(() => {
    axios
      .get("https://weather-app-tst.herokuapp.com/api/weather")
      .then((res) => {
        setLoading(false);
        console.log(res.data);
        
        setWeather(res.data);
        console.log(weather);
      })
      .catch((error) => console.log(error))
}, []);

Answer 1

weather hasn't updated by the time that console.log happens. weather should show the new value after the component rerenders