What is React Suspense and how does it work?

React Suspense is a component that lets you wrap components that might not be ready to render and display a fallback while they're loading.

It's primarily used for code splitting and data fetching.

Suspense allows you to handle loading states declaratively and provides a better user experience by showing loading indicators while components are being prepared.

import React, { Suspense } from 'react';

// Lazy loaded component const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> ); }

// With multiple components function App() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent1 /> <LazyComponent2 /> </Suspense> ); }