0

I participated in a trihackathon last week, and they gave us a code snippet asking what are the 3 errors in the code that violate principles of React Suspense. Can anyone figure it out?

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

const SuspensefulUserProfile = ({ userId }) => {
  const [data, setData] = useState({});
  useEffect(() => {
    fetchUserProfile(userId).then((profile) => setData(profile));
  }, [userId, setData])
  return (
    <Suspense>
      <UserProfile data={data} />
    </Suspense>
  );
};
const UserProfile = ({ data }) => {
  return (
    <>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </>
  );
};
const UserProfileList = () => (
  <>
    <SuspensefulUserProfile userId={1} />
    <SuspensefulUserProfile userId={2} />
    <SuspensefulUserProfile userId={3} />
  </>
);
john_challenge
  • 9
  • 1
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Sep 27 '21 at 19:35
  • 1. `data` needs to implement the interface required by Suspense. cf `resource` in the official docs. 2. The fetching is not supposed to be triggered in a useEffect. 3. The fetching is not supposed to be triggered in the component with the ``, but instead in its children. – Rikku Sep 29 '21 at 16:22

0 Answers0