Contra-challenge

index.js

/**
 * First issue was missing fallback prop on suspense which is required  
 * 
 * The second issuse was useEffect hook dependences of SuspensefulUserProfile component only required userId such that it can re-render if userId prop changes
 * 
 * The third issuse was Suspense component was used on sub component not on main component
 */

import { Suspense, useState, useEffect } from 'react';
const SuspensefulUserProfile = ({ userId }) => {
  const [data, setData] = useState({});
  useEffect(() => {
    setData(data)
    fetchUserProfile(userId).then((profile) => setData(profile));
  }, [userId])
  return (<UserProfile data={data} />);
};
const UserProfile = ({ data }) => {
  return (
    <>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </>
  );
};
const UserProfileList = () => (
  <>
  <Suspense fallback={<h1>Loadinng user profile 2</h1>}>
  <SuspensefulUserProfile userId={1} />
  </Suspense>
  <Suspense fallback={<h1>Loadinng user profile 2</h1>}>
  <SuspensefulUserProfile userId={2} />
  </Suspense>
  <Suspense fallback={<h1>Loadinng user profile 2</h1>}>
  <SuspensefulUserProfile userId={2} />
  </Suspense>
  </>
);

made it public