React component not re-rendering after state update in useEffect with async/await
I need some guidance on I'm working on a functional component in React (version 17.0.2) where I'm trying to fetch data from an API and update the state accordingly. However, I noticed that the component doesn't re-render after I update the state inside an `async/await` function in the `useEffect` hook. I'm using `useState` to manage the state, and I've confirmed that the API call is successful, yet the UI remains unchanged. Here is the relevant part of my code: ```javascript import React, { useEffect, useState } from 'react'; const MyComponent = () => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); const result = await response.json(); setData(result); setLoading(false); } catch (error) { console.error('Error fetching data:', error); setLoading(false); } }; fetchData(); }, []); return ( <div> {loading ? (<p>Loading...</p>) : (<p>{JSON.stringify(data)}</p>)} </div> ); }; export default MyComponent; ``` I also tried logging the `data` state after calling `setData(result)` but it always shows the previous state value. There are no warnings or errors in the console. I believe the `fetchData` function is being invoked correctly since the loading text changes to the data but does not display the expected result. Is there something I'm missing regarding how React handles state updates with async functions in `useEffect`? Any insights would be greatly appreciated! I'm open to any suggestions.