Suspense

Advertisement

With Suspense, We can load the skelton or fallback component, elements.

We can pass our components in `fallback` prop.

E.g.

In below example we wrap the <Suspense> component for our <SlowComponent> component.

In Suspense component we have pass the fallback prop.

It contain the element <span>Loading..</span> as a fallback to our slow component.

So, Until our <SlowComponent> component load, we see the fallback element.

import { Suspense } from 'react';

const SlowComponent = () => {
    return <h3>Slow Component</h3>
}

const App = () => {
	return (
		<Suspense fallback={<span>Loading..</span>}>
			<SlowComponent />
		</Suspense>
	)
}

export default App;

Leave a Reply