test suspense

gistfile1.txt

/**
 * 1. Fetch on render - render on useEffect/constructor 
 * 2. Not using a fetch which is suspense ready/has suspense features (swr, react-query, or even a wrapper on top of fetch)
 * 3. Not using fallback for loading state on wrappers for the request
 * 4. Error handling > create a custom error boundary to catch problems when we are rendering and while fetching!
 */
const fetcher = (url) => fetch(url).then((r) => r.json());

const SuspensefulUserProfile = ({ userId }) => {
	const { data } = someSuspenseReadyFetcher(userId);
	return (
    <>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </>
  );
};

export const App = () => {
	return (
		<ErrorBoundary fallback={<h2>Could not fetch user list.</h2>}>
			<Suspense fallback={<div>Loading user list</div>}>
				<SuspensefulUserProfile userId={1} />
				<SuspensefulUserProfile userId={2} />
				<SuspensefulUserProfile userId={3} />
			</Suspense>
		</ErrorBoundary>
	)
};

export default App;