Suspense is a built-in React component that lets you handle the loading state of parts of your application gracefully.
Instead of manually showing loading spinners and managing loading flags everywhere, you can wrap components with <Suspense> and provide a fallback UI (like a spinner or skeleton screen) until the component or resource is ready.

Think of Suspense as a "declarative loading manager".

It was first introduced to support lazy loading of components (React.lazy), and now it's expanding to more use cases like data fetching with modern libraries.

Key points:

• Suspense lets you pause rendering while waiting for something (like a component or data) to load.
• It shows a fallback while waiting.
• It resumes and renders the final UI when ready.

Example:

import { Suspense } from 'react';
import MyLazyComponent from './MyLazyComponent';

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

In this case, React will show "Loading..." until MyLazyComponent is loaded.

---