React Suspense

React Suspense

React Suspense allows your specific components to politely "wait" for something else to finish loading before they can render, proactively showing a fallback UI (like a loading spinner) while waiting. It is predominantly used with React.lazy for efficient code-splitting.

Using Suspense

import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));

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