What Are React Lazy And Suspense? Complete Example Guide

What Are React Lazy and Suspense?

React Lazy and Suspense allow lazy-loading of components, reducing the initial load time of your app.

• React.lazy() dynamically imports components
• Suspense shows fallback UI while loading

---

Basic Syntax

const LazyComponent = React.lazy(() => import("./LazyComponent"));

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

---

Example

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

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

export default App;

✅ LazyComponent only loads when needed, showing fallback UI during load.

---

Key Points

• Improves app performance by reducing bundle size
• Suspense requires a fallback UI
• Works best with React Router for route-based lazy loading
• Dynamic imports are supported via React.lazy()

---

Conclusion

React Lazy and Suspense optimize component loading, enhancing performance and user experience in large React apps.

---

Citations

https://savanka.com/category/learn/react/
https://www.w3schools.com/REACT/DEFAULT.ASP