Undefined state using async await function with axios in React App

I am creating a basic weather app that fetches data from the Openweathermap API and displays it on the page.

I don’t get why the console.log(data) is showing undefined in my console?

   const [data, setData] = useState()

   useEffect(() => {

      const fetchData = async () => {
         const res = await axios.get(url)
         setData(res.data)
         console.log(data)
      }

      fetchData()
   }, [])

Should the console.log(data) only run once the await part of the function is resolved?

The data does get retrieved successfully and displays on the page correctly, as I am only rendering the html if data is defined:

return (
         {data && (
            <div className="weather">
                //content goes here
            <div/>

I just don’t understand why it is showing as undefined in the console?

Thanks in advance!

>Solution :

setData is asynchronous. it won’t update the data immediately hence you don’t see the result immediately.

you can use useEffect to detect the changes once state is updated

useEffect(() => {console.log(data)}, [data])