React.Suspense lets you show a fallback UI (like a loader or message) while waiting for components to load. It works best with React.lazy() for code-splitting.
🎯 Why use Suspense?
• Show loaders while fetching or lazy loading
• Better user experience
• Cleaner code compared to manual loading states
🔧 Example:
import React, { Suspense } from "react";
const About = React.lazy(() => import("./About"));
function App() {
return (
<Suspense fallback={<p>Loading...</p>}>
<About />
</Suspense>
);
}
📌 Key points:
• Wrap lazy components inside
• The fallback prop defines what to show while loading
• Currently supports lazy-loaded components, and in future, more data fetching use cases
Top comments (0)