React React Suspense And Code Splitting Complete Guide

Prerequisites:

• Basic understanding of React (components, props, state).
• Node.js and npm installed on your machine.
• Familiarity with create-react-app or setting up a React project.

Step 1: Set Up Your React Project

First, set up a new React project using create-react-app.

npx create-react-app react-suspense-code-splitting
cd react-suspense-code-splitting
npm start

Step 2: Create Components to Split

Let’s assume we have three components:

1. MainComponent: This is our main component.
2. LazyLoadedComponent: This component will be lazily-loaded using Suspense.
3. LazyLoadedComponent2: Another component to demonstrate dynamic imports.

Step 3: Create the Main Component

Create a MainComponent.js file in the src folder. This component will include links to load both lazy-loaded components.

src/MainComponent.js

import React from 'react';
import { Link } from 'react-router-dom';

function MainComponent() {
  return (
    <div>
      <h1>Main Component</h1>
      <Link to="/lazy-loaded">Go to Lazy Loaded Component</Link>
      <br />
      <Link to="/lazy-loaded2">Go to Lazy Loaded Component 2</Link>
    </div>
  );
}

export default MainComponent;

Step 4: Set Up React Router

To navigate between different components, we need to set up React Router. Install it:

npm install react-router-dom

Then, configure the router in App.js.

src/App.js

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import MainComponent from './MainComponent';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={MainComponent} />
        {/* We will lazy-load and wrap our components here */}
      </Switch>
    </Router>
  );
};

export default App;

Step 5: Create the Lazy-Loaded Components

Create LazyLoadedComponent.js and LazyLoadedComponent2.js files in the src folder.

src/LazyLoadedComponent.js

import React from 'react';

const LazyLoadedComponent = () => {
  return (
    <div>
      <h2>Lazy Loaded Component</h2>
      <p>This component is loaded lazily!</p>
    </div>
  );
};

export default LazyLoadedComponent;

src/LazyLoadedComponent2.js

import React from 'react';

const LazyLoadedComponent2 = () => {
  return (
    <div>
      <h2>Lazy Loaded Component 2</h2>
      <p>This is another lazily-loaded component!</p>
    </div>
  );
};

export default LazyLoadedComponent2;

Step 6: Implement Code Splitting Using React.lazy()

We need to use React.lazy() for the lazy-loading of our components.

src/App.js

import React, {Suspense} from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import MainComponent from './MainComponent';

// Lazily loading the components
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));
const LazyLoadedComponent2 = React.lazy(() => import('./LazyLoadedComponent2'));

const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={MainComponent} />
          <Route path="/lazy-loaded" component={LazyLoadedComponent} />
          <Route path="/lazy-loaded2" component={LazyLoadedComponent2} />
        </Switch>
      </Suspense>
    </Router>
  );
};

export default App;

Step 7: Configure Fallback UI with Suspense

With the above code, when a user navigates to /lazy-loaded or /lazy-loaded2, the respective component will be loaded lazily. During this loading time, Suspense will display the fallback UI provided (<div>Loading...</div>).

Step 8: Test Your Application

Run your application again and navigate to the links:

npm start

Navigate to /lazy-loaded and /lazy-loaded2. You should see the fallback UI ("Loading...") briefly before the actual content of the components.

Dynamic Code-Splitting Example

React also supports dynamic imports that depend on some conditions. Let’s modify MainComponent to dynamically load a component based on a button click.

src/MainComponent.js

import React, { Suspense, useState } from 'react';
import { Link } from 'react-router-dom';

// Dynamically importing another lazy-loadable component
const DynamicLazyComponent = React.lazy(() => import('./DynamicLazyComponent'));

function MainComponent() {
  const [showDynamicComponent, setShowDynamicComponent] = useState(false);

  return (
    <div>
      <h1>Main Component</h1>
      <Link to="/lazy-loaded">Go to Lazy Loaded Component</Link>
      <br />
      <Link to="/lazy-loaded2">Go to Lazy Loaded Component 2</Link>
      <br /><br />
      <button onClick={() => setShowDynamicComponent(true)}>Load Dynamic Component</button>
      {showDynamicComponent && (
        <Suspense fallback={<div>Loading Dynamic Component...</div>}>
          <DynamicLazyComponent />
        </Suspense>
      )}
    </div>
  );
}

export default MainComponent;

Create DynamicLazyComponent.js.

src/DynamicLazyComponent.js

import React from 'react';

const DynamicLazyComponent = () => {
  return (
    <div>
      <h3>Dynamic Lazy Component</h3>
      <p>This component was loaded dynamically!</p>
    </div>
  );
};

export default DynamicLazyComponent;

Now, when you click the "Load Dynamic Component" button, the DynamicLazyComponent should load lazily with its own fallback UI.

Conclusion

By following these steps, you learned how to use code splitting in combination with React Suspense to load components only when they're needed. This can significantly reduce your initial load time and enhance the responsiveness of your application. Keep experimenting with these features to understand them better and apply them effectively in your projects.