how to access updated state after using useEffect in React with async function
I'm working with an scenario with accessing the updated state in a React functional component after calling an async function within a `useEffect` hook. I have the following setup where I fetch some data and then attempt to update the state based on that data. However, when I log the state immediately after setting it, it still reflects the previous state value, not the updated one. Here's a simplified version of my code: ```javascript import React, { useEffect, useState } from 'react'; const DataFetcher = () => { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { const response = await fetch('https://api.example.com/data'); const result = await response.json(); setData(result); console.log('Data set:', result); // This logs the correct data }; fetchData(); }, []); console.log('Current data:', data); // This logs null on the first render return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>; }; export default DataFetcher; ``` On the initial render, `console.log('Current data:', data);` outputs `null`, even though the data from the fetch call is logged correctly within the `fetchData` function. This behavior confuses me because I expected the state to reflect the most recent value after the asynchronous call. I’ve checked the React documentation, and it seems like the state update is happening correctly, but I can’t figure out why the `console.log` is showing the outdated value. I've also tried using a second `useEffect` to monitor changes to `data`, but it doesn't resolve the scenario. What am I missing here? Is there a better way to handle state updates after asynchronous calls in hooks? Any insights would be greatly appreciated!