DEV Community

Aman Kureshi
Aman Kureshi

Posted on

⏳ React Suspense — Handle Lazy Loading with Grace

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

📌 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)