Understanding Suspense and React Hooks
You misused Suspense to its core, at least until suspense for data fetching is available.
Suspense only currently works with React.lazy components, not with arbitrary 'loading' states of your application. For instance, how should React figure out that your data is loading?
The only use for Suspense is to allow showing some fallback while React loads a lazy component. For other types of lazy loading app data you can implement your own fallback, as in:
const SuspensefulUserProfile = ({ userId }) => {
const [data, setData] = useState();
useEffect(() => {
fetchUserProfile(userId).then(setData);
}, [userId])
return data ? <UserProfile data={data} /> : 'Loading...';
};
The main issue is that you need to use what's called a Suspense integration in order to perform the data fetching and interface with the <Suspense> component.
Typically the <UserProfile> component would consume a resource synchronously (your data in this case) and suspend the component when the resource is not available yet, causing the <Suspense> to temporarily render its fallback prop (which you haven't specified). When the resource becomes available, the <UserProfile> will re-render, and the consumed resource is returned synchronously.
I've published a Suspense integration called suspense-service that lets you consume resources defined by an async function using a service that encapsulates the React Context API.
Here's a demonstration of suspense-service below by slightly modifying your example code:
// import { Fragment, Suspense } from 'react';
const { Fragment, Suspense } = React;
// import { createService, useService } from 'suspense-service';
const { createService, useService } = SuspenseService;
const fetchUserProfile = userId => {
return new Promise(resolve => {
setTimeout(resolve, 1000 + Math.random() * 1000);
}).then(() => {
return {
name: `User ${userId}`,
email: `user${userId}@example.com`
};
});
};
const UserProfileService = createService(fetchUserProfile);
const SuspensefulUserProfile = ({ userId }) => {
return (
<UserProfileService.Provider request={userId}>
<Suspense fallback={<h1>Loading User Profile...</h1>}>
<UserProfile />
</Suspense>
</UserProfileService.Provider>
);
};
const UserProfile = () => {
const data = useService(UserProfileService);
return (
<Fragment>
<h1>{data.name}</h1>
<h2>{data.email}</h2>
</Fragment>
);
};
const UserProfileList = () => {
return (
<Fragment>
<SuspensefulUserProfile userId={1} />
<SuspensefulUserProfile userId={2} />
<SuspensefulUserProfile userId={3} />
</Fragment>
);
};
ReactDOM.render(<UserProfileList />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id="root"></div>