Fetching Remote Data Asynchronously Inside useEffect

import React, { useState, useEffect } from 'react';
 
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [errorMessage, setErrorMessage] = useState('');
 
  useEffect(() => {
    async function loadData() {
      try {
        const res = await fetch(`https://api.example.com/users/${userId}`);
        if (!res.ok) throw new Error('User not found');
        const data = await res.json();
        setUser(data);
      } catch (err) {
        setErrorMessage(err.message);
      }
    }
    loadData();
  }, [userId]);
 
  if (errorMessage) return <p>Error: {errorMessage}</p>;
  if (!user) return <p>Loading...</p>;
  return <h2>{user.name}</h2>;
}