Suspense

Why Design This ?

React.Suspense is specifically designed for handling asynchronous components, like code-splitting with React.lazy （React 16.6), data fetching with concurrent features (React 18), or integrating with libraries like Relay for asynchronous data loading.

It provides a declarative way to show a fallback UI (like a spinner) while waiting for the component to load. Note: Only the data source of using use() will take effect

It can play a huge role in server-side rendering, equivalent to exception catching for component rendering.

Example:

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const SuspenseWithLazyLoading = () => (
    <Suspense fallback={<div className="spinner">Loading component...</div>}>
        <LazyComponent />
    </Suspense>
);

export default SuspenseWithLazyLoading;

useState and setLoading are more for solving the problem of state in case of asynchronous data.

• Suspense can solve a similar problem in a declarative way, the code is simpler, and it doesn’t trigger additional refreshes.
• Suspense can skip loading show when the data fetch is fast
• Suspense support nesting

Version

>= React 18

References

• React Suspense Documentation — Official React documentation for the Suspense component
• Dan Abramov — Algebraic Effects for the Rest of Us — Understanding the theory behind React Suspense
• React Lazy Loading Guide — web.dev — Google’s guide to code splitting with React Suspense