React Suspense for Data Fetching: The Complete Guide

What is Suspense?

Suspense lets components 'wait' for something before rendering – traditionally code splitting, now also data fetching. You wrap a component in <Suspense fallback={...}>, and React handles loading states automatically.

Basic Usage

import { Suspense } from 'react';
import UserProfile from './UserProfile';
function App() {
return (
<Suspense fallback={<LoadingSpinner />}>
<UserProfile userId={123} />
</Suspense>
);
}
// UserProfile internally throws a promise to suspend
function UserProfile({ userId }) {
const user = useSuspenseQuery(userId); // from Relay or custom
return <div>{user.name}</div>;
}

Custom Suspense Hook (Advanced)

function useSuspenseData(url) {
const ref = useRef();
if (!ref.current) {
throw fetchData(url).then(result => ref.current = result);
}
return ref.current;
}

Performance Tips

• Avoid nested Suspense boundaries unless necessary – each adds overhead
• Use Suspense with React.lazy for code splitting
• Combine with ErrorBoundary for graceful failures

Common Mistakes

• Not having a fallback – blank screen during loading
• Putting Suspense too high – entire page shows loading
• Forgetting error boundaries – unhandled promise rejections

Interview Q&A

Q: How does Suspense avoid waterfall requests? By letting components declare their data needs – React can fetch in parallel before rendering.
Q: Can I use Suspense without a library? Yes, implement a promise-cache pattern.

Conclusion

Suspense + error boundaries create a robust loading/error UX. Start with React.lazy, then adopt data Suspense with Relay or Next.js.