Suspense.jsx

import { Suspense, useState, useEffect } from "react";

const fetchUserProfile = (userId) => {
  return new Promise((resolve) => {
    resolve({
      name: `Forrest ${userId}`,
      email: `forrest${userId}@gmail.com`,
    });
  });
};

const UserProfile = ({ data }) => {
  return (
    <>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </>
  );
};

const SuspensefulUserProfile = ({ userId }) => {
  const [data, setData] = useState({});

  useEffect(() => {
    fetchUserProfile(userId).then((profile) => setData(profile));
  }, [userId, setData]);

  return (
    <Suspense>
      <UserProfile data={data} />
    </Suspense>
  );
};

const UserProfileList = () => (
  <>
    <SuspensefulUserProfile userId={1} />
    <SuspensefulUserProfile userId={2} />
    <SuspensefulUserProfile userId={3} />
  </>
);

export default UserProfileList;