// Fix this React component to handle the loading state correctly
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
  }, [userId]);

  return <div>{user.name}</div>;
}

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true); // Added loading state
  const [error, setError] = useState(null); // Added error handling

  useEffect(() => {
    let isMounted = true;
    setLoading(true);

    fetchUser(userId)
      .then(data => {
        if (isMounted) {
          setUser(data);
          setError(null);
        }
      })
      .catch(err => {
        if (isMounted) setError(err);
      })
      .finally(() => {
        if (isMounted) setLoading(false);
      });

    return () => { isMounted = false; }; // Cleanup
  }, [userId]);

  if (loading) return <div>Loading user profile...</div>;
  if (error) return <div>Error loading user.</div>;
  if (!user) return null;

  return <div>{user.name}</div>;
}