The following code tries to implement the React Suspense API

README.md

3 core issues

1. mixin useEffect: the order should be

• Start fetching
• Start rendering
• Finish fetching

2. missing Suspense fallback
3. not try to read user info before it loaded

I also add lazy reload component here.

UserProfile.jsx

import React from "react";

const UserProfile = ({ data }) => {
  // Try to read user info, although it might not have loaded yet
  const data = data.read();

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

export default UserProfile;

UserProfileList.jsx

import React, { Suspense } from 'react';

// Lazy-loaded
const UserProfile = React.lazy(() => import("./UserProfile"));

const SuspensefulUserProfile = ({ userId }) => {
  // This is not a Promise. It's a special object from our Suspense integration.
  const data = fetchUserProfile(userId);

  // Show a spinner while the profile is loading
  return (
    <Suspense fallback={<Spinner />}>
      <UserProfile data={data} />
    </Suspense>
  );
};
const UserProfileList = () => (
  <>
    <SuspensefulUserProfile userId={1} />
    <SuspensefulUserProfile userId={2} />
    <SuspensefulUserProfile userId={3} />
  </>
);