How To Handle Async Data Loading, Lazy Loading, and Code Splitting with React

The author selected Creative Commons to receive a donation as part of the Write for DOnations program.

Introduction

As a JavaScript web developer, asynchronous code gives you the ability to run some parts of your code while other parts are still waiting for data or resolving. This means that important parts of your app will not have to wait for less important parts before they render. With asynchronous code you can also update your application by requesting and displaying new information, giving users a smooth experience even when long functions and requests are processing in the background.

In React development, asynchronous programming presents unique problems. When you use React functional components for example, asynchronous functions can create infinite loops. When a component loads, it can start an asynchronous function, and when the asynchronous function resolves it can trigger a re-render that will cause the component to recall the asynchronous function. This tutorial will explain how to avoid this with a special Hook called useEffect, which will run functions only when specific data changes. This will let you run your asynchronous code deliberately instead of on each render cycle.

Asynchronous code is not just limited to requests for new data. React has a built-in system for lazy loading components, or loading them only when the user needs them. When combined with the default webpack configuration in Create React App, you can split up your code, reducing a large application into smaller pieces that can be loaded as needed. React has a special component called Suspense that will display placeholders while the browser is loading your new component. In future versions of React, you’ll be able to use Suspense to load data in nested components without render blocking.

In this tutorial, you’ll handle asynchronous data in React by creating an app that displays information on rivers and simulates requests to Web APIs with setTimeout. By the end of this tutorial, you’ll be able to load asynchronous data using the useEffect Hook. You’ll also be able to safely update the page without creating errors if the component unmounts before data resolution. Finally, you’ll split a large application into smaller parts using code splitting.