React Suspense and lazy loading help optimize your React app by loading components only when needed, improving performance and reducing initial load times.

1. React.lazy() – Lazy Loading Components

React.lazy() allows you to dynamically import components, so they are only loaded when rendered.

2. React.Suspense – Handling Loading States

React.Suspense wraps lazy-loaded components and shows a fallback UI (like a loader) until the component is ready.

💡 Code Example: Lazy Loading with Suspense

import React, { Suspense, lazy } from 'react';

// Lazy load the component
const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
return (
<div>
<h1>My React App 🚀</h1>

{/* Suspense wraps the lazy component */}
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
};

export default App;

📂 LazyComponent.jsx

import React from 'react';

const LazyComponent = () => {
return <h2>I was lazy-loaded! 🎉</h2>;
};

export default LazyComponent;

⚡ How It Works:

1. React.lazy() loads LazyComponent only when it’s about to render.
2. <Suspense> shows the fallback (<div>Loading...</div>) until LazyComponent is fully loaded.

🚀 Pro Tip:

• Error Handling: Use ErrorBoundary to catch errors during lazy loading.
• Multiple Lazy Components: Wrap them all in one <Suspense> or use separate ones.