Lazy Loading in React JS: A Quick Overview in 8 Minutes

Lazy loading in React is a technique used to optimize the performance of your web application by only loading the components that are needed, instead of loading everything at once. This can significantly improve your app’s speed and reduce the initial load time. In this tutorial, I will walk you through how to implement lazy loading in React using React.lazy and React.Suspense in just 8 minutes.

Step 1: Create a new React app
First, make sure you have Node.js installed on your machine. If not, you can download and install it from the official Node.js website. Once Node.js is installed, you can create a new React app using Create React App. Open your terminal and run the following command:

npx create-react-app lazy-loading-app

This command will create a new React app called ‘lazy-loading-app’ in your current directory.

Step 2: Create a lazy-loaded component
Next, create a new component that you want to lazy load. For this tutorial, let’s create a simple component called LazyComponent. Inside the src folder of your React app, create a new file called LazyComponent.js and add the following code:

import React from 'react';

const LazyComponent = () => {
  return (
    <div>
      <h1>Lazy Loaded Component!</h1>
    </div>
  );
}

export default LazyComponent;

Step 3: Lazy load the component
Now, let’s lazy load the LazyComponent using React.lazy and React.Suspense. Open the App.js file in the src folder of your React app and modify it as follows:

import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <h1>Lazy Loading in React</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

In the code above, we import React.lazy and Suspense from the React library. We then use the React.lazy function to dynamically import the LazyComponent when it is needed. We wrap the LazyComponent inside a Suspense component and provide a fallback prop that displays a loading message while the component is being loaded.

Step 4: Run your React app
Finally, let’s run your React app to see lazy loading in action. In your terminal, navigate to the root directory of your React app and run the following command:

npm start

This will start the development server and open your React app in a new browser window. You should see the ‘Lazy Loading in React’ heading and a ‘Loading…’ message displayed on the screen. After a brief moment, the LazyComponent will be dynamically loaded and displayed on the screen.

And that’s it! You have successfully implemented lazy loading in React using React.lazy and React.Suspense. This technique can help improve the performance of your web app by only loading the components that are needed, leading to faster load times and a smoother user experience. Experiment with lazy loading in your own React projects to see the benefits for yourself.