React Lazy Loading

React lazy loading is a technique used to improve the performance of React applications by splitting the code into smaller chunks and loading them only when needed. This helps reduce the initial bundle size and, consequently, the load time of your application.

In a typical React application, all the components and dependencies are bundled together into a single JavaScript “bundle” file. When a user visits the application, they need to download this entire bundle, even if they only use a small portion of it. This can result in slower initial load times, especially for larger applications.

React lazy loading solves this problem by allowing you to load components asynchronously, on-demand. It leverages two key features:

Dynamic Imports: Dynamic imports are a JavaScript feature that allows you to load modules or files asynchronously at runtime. This feature is used to split your code into smaller chunks.

React Suspense: React Suspense is a mechanism for handling asynchronous operations, including code splitting and data fetching, while keeping your components in a loading state until the required resources are ready.

For example:

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

// Define a lazy-loaded component
const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>My App</h1>

      <Suspense fallback={<div>Still loading...</div>}>
        <LazyComponent />
      </Suspense>

    </div>
  );
}

export default App;

In the example above, we import the lazy function from React and create a lazy-loaded component using lazy(() => import(‘./LazyComponent’)). The import(‘./LazyComponent’) statement is a dynamic import, which loads the LazyComponent module asynchronously.

Inside the App component, we use the Suspense component to wrap the lazy-loaded component (LazyComponent). The fallback prop specifies what to render while the component is loading. In this case, it’s a simple “Still loading…” message.

When the LazyComponent is needed (e.g., when a user navigates to a route that requires it), React will load it on-demand. Until it’s loaded, the “Loading…” message will be displayed.

React lazy loading is commonly used in combination with React Router for code-splitting on different routes. It allows you to load only the components and code necessary for the current route, leading to faster load times and better user experiences, especially in larger applications.

Here’s an example of lazy loading used in a project…

const Homepage = lazy(() => import("./pages/Homepage"));
const Product = lazy(() => import("./pages/Product"));
const Pricing = lazy(() => import("./pages/Pricing"));
const Login = lazy(() => import("./pages/Login"));
const AppLayout = lazy(() => import("./pages/AppLayout"));
const PageNotFound = lazy(() => import("./pages/PageNotFound"));


function App() {
  return (
    <AuthProvider>
      <CitiesProvider>
        <BrowserRouter>
          <Suspense fallback={<SpinnerFullPage />}>
            <Routes>
              <Route index element={<Homepage />} />
              <Route path="product" element={<Product />} />
              <Route path="pricing" element={<Pricing />} />
              <Route path="login" element={<Login />} />
              <Route
                path="app"
                element={
                  <ProtectedRoute>
                    <AppLayout />
                  </ProtectedRoute>
                }
              >
                <Route index element={<Navigate replace to="cities" />} />
                <Route path="cities" element={<CityList />} />
                <Route path="cities/:id" element={<City />} />
                <Route path="countries" element={<CountryList />} />
                <Route path="form" element={<Form />} />
              </Route>
              <Route path="*" element={<PageNotFound />} />
            </Routes>
          </Suspense>
        </BrowserRouter>
      </CitiesProvider>
    </AuthProvider>
  );

So in this instance, a spinner component (<SpinnerFullPage>) is loaded whilst we wait for the page to be fetched.