React Lazy Loading with Tailwind CSS

React Lazy Loading ka use dynamically components ya pages load karne ke liye hota hai. Isse initial load time kam hota hai aur application performance improve hoti hai.

React Lazy Loading Kya Hai?

React lazy loading ka use `React.lazy()` aur `Suspense` ke sath hota hai. Yeh feature sirf tabhi components load karta hai jab unki zaroorat ho.

Example: Lazy Loading in React

Niche diya gaya example `React.lazy()` aur `Suspense` ka use karke ek lazy loaded component dikhata hai.

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

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

function App() {
  return (
    

      
React Lazy Loading Example
      Loading...}>
        
      
    
  );
}

export default App;
        

React Router Ke Sath Lazy Loading

Agar aap lazy loading ko React Router ke sath use karna chahte hain, toh `Suspense` ka use karke different pages lazy load kar sakte hain.

import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

function App() {
  return (
    
      Loading...}>
        
          } />
          } />
        
      
    
  );
}

export default App;
        

Conclusion

Lazy loading ka use React applications me performance optimize karne ke liye hota hai. Is feature ka sahi tarike se use karke aap apni application ka load time reduce kar sakte hain.