Suspense

The <Suspense> lets you display a fallback UI (like a loading indicator or skeleton) while its child components are waiting for an asynchronous operation to complete (such as lazy-loading code or fetching data).

Note: Works seamlessly with React.lazy() for code-splitting and the use hook for inline promise resolution.

Lazy Components

You can load components asynchronously only when they are needed, reducing the initial bundle size.

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

// Lazy Component
const HeavyComponent = lazy(() => import('./HeavyComponent'));

export const Page = () => {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <HeavyComponent />
        </Suspense>
    );
};

Promise Resolver

You can pass a promise directly into a component and use the use hook to suspend rendering until the data is fully available.

export const List = ({ itemsPromise }) => {
    const items = use(itemsPromise);
    return <ul>{items}</ul>;
};

export const Container = ({ itemsPromise }) => {
    return (
        // Suspend rendering until 'itemsPromise' resolves
        <Suspense fallback={<div>Loading...</div>}>
            <List itemsPromise={itemsPromise} />
        </Suspense>
    );
};