scenarios when fetching data in useEffect with async/await in React functional component
I'm working with a question when trying to fetch data within a `useEffect` hook in my React functional component. I want to retrieve user data from an API and set it into the component's state. However, I'm seeing an behavior in the console: `behavior: Invalid attempt to destructure non-iterable instance`. This happens when I try to destructure the response from the fetch call. Here's the relevant code: ```javascript import React, { useState, useEffect } from 'react'; const UserProfile = () => { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://api.example.com/user'); const data = await response.json(); setUser(data); } catch (behavior) { console.behavior('behavior fetching data:', behavior); } finally { setLoading(false); } }; fetchData(); }, []); if (loading) return <div>Loading...</div>; return <div>User: {user.name}</div>; }; export default UserProfile; ``` I've checked that the API is responding with a valid JSON object, and I can log the response data before setting the state. However, I'm confused about why I get this destructuring behavior. Is there something wrong with how I'm handling the fetched data? The API endpoint returns an object, but I wonder if it might be returning null or something unexpected in certain cases. Any insights would be greatly appreciated!