🚀 Code Splitting in React with Lazy Loading

🚀 Code Splitting in React with Lazy Loading

As React apps grow, so do their bundle sizes. Loading everything at once can slow down performance and hurt user experience. That’s where code splitting and lazy loading come in.

In this blog, we’ll explore how to split your code and load components only when needed using React.lazy and Suspense.

---

💡 What is Code Splitting?

Code splitting means breaking up your JavaScript bundle into smaller chunks that can be loaded on demand.

Benefits:

• 🚀 Faster initial page loads
• 🚮 Less unused code
• 🔍 Better performance for large apps

React supports code splitting out of the box using dynamic import() and React.lazy().

---

🌐 Basic Example with React.lazy

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

const AboutPage = lazy(() => import('./pages/About'));

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

export default App;

🔍 Explanation:

• lazy() dynamically loads the component.
• Suspense shows a fallback UI (like a spinner) until the component is loaded.

---

📌 Best Practices

1. Use lazy loading for non-critical components like modals, settings pages, charts, etc.
2. Combine with React Router for route-based code splitting.
3. Keep fallbacks lightweight to avoid delays.

---

🗺️ Real-World Use with React Router

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

---

🎉 Bonus: Named Exports with React.lazy

React.lazy only works with default exports. If your component uses named exports, wrap it:

const LazyComponent = lazy(() =>
  import('./MyComponent').then(module => ({ default: module.MyComponent }))
);

---

🚀 Final Thoughts

Code splitting and lazy loading are essential for improving performance in large-scale React apps. They help reduce load time, enhance UX, and boost Lighthouse scores!

Start small: lazy load routes, then explore loading components, utilities, or charts on demand.

---

🔗 Useful Links

• React Docs: Code Splitting
• React.lazy & Suspense

Thanks for reading! 👋 Feel free to share or comment with questions!