How to Lazy-Load Your React App

In this article we are going to discuss how we can improve the performance of our apps by loading only the JavaScript that the user needs at any point in time, reducing the amount of code they have to download and execute on page load, and making the app interactive faster. Cool Isn't it?

Well use React.lazy and Suspense to delay the loading of a complex component like KendoReacts StockChart until a button is clicked.

Understanding Dynamic Imports

Instead of sending a big bundle with all the code for our app on initial page load, we can send smaller bundles gradually as the user interacts with the app. To do this well rely on a modern JavaScript feature called dynamic imports. A dynamic import returns a promise that will resolve once the required module gets transferred over the network, and is parsed and executed by the JavaScript engine.

A static import looks like this:

import { concat } from "./utils";console.log(concat("A", "B", "C"));

While a dynamic import looks like this:

import("./utils").then(utils => {  console.log(utils.concat("A", "B", "C"));});

Tools like Create React App and webpack understand what were trying to do with these dynamic imports, and will output separate JavaScript files for these lazy-loaded bundles. If were configuring webpack ourselves, it may be a good idea to spend some time reading webpacks documentation on code-splitting

Lazy-Loading with React.lazy and Suspense

Starting with version 16.6, React includes a built-in React.lazy function that makes it very easy to split an application into lazy-loaded components using dynamic imports.

You can turn this:

import StockChartContainer from "./StockChartContainer";

Into this:

const StockChartContainer = lazy(() => import("./StockChartContainer"));

And React will automatically load the bundle containing our StockChartContainer component when we try to render it for the first time.

Well want to wrap this lazy component inside a Suspense component, which will allow us to show some fallback content while things are being loaded. Lets see what that looks like.

Example

In this example we are going to be loading a complex component containing KendoReacts StockChart, but only after the user clicks on a button. This way well avoid sending the user more code than they need on initial load.

Well store state to track whether our complex component needs to be displayed:

class App extends Component {  constructor(props) {    super(props);    this.state = {      showChart: false    };  }}

Then, well implement a handleClick function that will toggle state when the user clicks a button:

class App extends Component {  // ...  handleClick = () => {    this.setState(prevState => ({      showChart: !prevState.showChart    }));  };}

Now we just need to put it all together in the render method:

const StockChartContainer = lazy(() => import("./StockChartContainer"));class App extends Component {  // ...  render() {    const { showChart } = this.state;    const buttonText = showChart ? "Hide Stock Chart" : "Show Stock Chart";    const chartComponent = showChart ? <StockChartContainer /> : null;    const loadingComponent = <div>Loading...</div>;    return (      <div className="App">        <header className="App-header">          <h1 className="App-title">Stock Chart</h1>          <div className="App-button">            <Button primary={true} onClick={this.handleClick}>              {buttonText}            </Button>          </div>        </header>        <div className="App-chart">          <Suspense fallback={loadingComponent}>{chartComponent}</Suspense>        </div>      </div>    );  }}

Conclusion

If we send too much JavaScript to our users, well make the browsers main thread busy, and it wont be able to respond to user interaction. Lazy-loading components of our app that are not needed on initial page load will help reduce the amount of work the browser has to do, which will drive down our time-to-interactive, and provide a better experience to our users, especially those on mobile devices. React.lazy and Suspense make it so easy to do that we really have no excuse!