Connect Your Django App to Cloud Storage

• April 25, 2025
• 3 Views
• By Patrick Chidera

🚀 Understanding React.lazy and Suspense: Code Splitting in React Made Simple

As React apps grow, so does their bundle size. This can impact your app's performance — especially on slower networks or devices. Thankfully, React provides a powerful feature to help: React.lazy and Suspense. In this tutorial, we'll explore what they are, why they're useful, and how to use them effectively with a hands-on example.

---

📦 What is React.lazy?

React.lazy lets you dynamically import a component only when it’s needed — a technique known as code splitting. This helps reduce your initial JavaScript bundle size and speeds up your app’s load time.

import React, { lazy } from 'react';

const LazyComponent = lazy(() => import('./MyComponent'));
  

Here, MyComponent will not be included in the main bundle. Instead, it will be loaded only when needed. This can significantly boost performance in large applications.

⏳ What is Suspense?

Since React.lazy loads components asynchronously, React needs a way to handle the loading state. That’s where Suspense comes in.

You wrap lazy-loaded components with <Suspense> and provide a fallback UI (like a spinner or a message) while the component is being loaded.

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

const LazyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <h1>Welcome to my app!</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}
  

🎯 Why Use React.lazy and Suspense?

• ⚡ Improved Performance: Only load what’s necessary upfront.
• 📱 Faster on Mobile: Smaller bundles load quicker on slower devices.
• 🧩 Modular Architecture: Keeps your codebase clean and manageable.

🛠 A Real-World Example

Let’s imagine you have a dashboard app where the settings page is rarely used. You can lazy-load it like this:

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

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

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

In this example, the Settings page is only loaded when the user visits /settings, reducing the initial load time of the app.

🚨 Things to Keep in Mind

• Server-side rendering (SSR) support for Suspense is limited in older versions of React, but is being improved.
• React.lazy only works for default exports. If you’re using named exports, you’ll need a wrapper or restructure your exports.
• You can combine lazy-loading with other performance techniques like dynamic imports, route splitting, and memoization.

✅ Conclusion

React.lazy and Suspense make it incredibly easy to add code splitting to your React application. With just a few lines of code, you can drastically improve the performance and user experience of your app.

Start using them today — especially for routes, modals, or large components not needed right away.

⚠️ Pro Tip: Always test your lazy-loaded components in production mode, as development builds can behave differently.

Happy coding! 🎉