Three problems with this code:
SuspensefulUserProfile
is not correctly utilizing the Suspense. We need to fetch data as we render, instead of first rendering and then fetching (through useEffect).UserProfile
component should be responsible for fetching the data instead ofSuspensefulUserProfile
.- There is no fallback component. This will lead to a poor user experience.
Corrected:
import { Suspense, useState, useEffect } from 'react';