Skip to main content

Lazy Loading and Code Splitting in React

Improving the performance of your React application is essential to provide a smooth user experience. Lazy loading and code splitting are two techniques that help reduce the initial load time of your application by only loading the necessary code when needed.

Lazy Loading​

Lazy loading is a technique that delays the loading of certain parts of an application until they are required. In React, you can use the React.lazy() function to lazily load components when they are needed.

Using React.lazy()​

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

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

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

export default App;

In this example, MyComponent is only loaded when it is required by the App component.

Code Splitting​

Code splitting is a technique that divides your application code into smaller chunks, which can be loaded on demand. This reduces the initial load time of your application by only loading the necessary code for the current view. Webpack, a popular bundler for React applications, supports code splitting out of the box.

Using React.lazy() with React Router​

You can also use React.lazy() in combination with React Router to load route-specific components when they are needed.

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

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

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Conclusion​

Lazy loading and code splitting are powerful techniques for optimizing the performance of your React applications. By using React.lazy() and code splitting, you can reduce the initial load time of your application and improve the user experience. These optimizations ensure that only the necessary code is loaded when needed, making your application faster and more efficient.