Dark Mode in Clubhouse is here! Learnmore
Software Development

Lazy Loading with Suspense in React

Niall Maher

React’s Suspense is going to evolve over the coming months. It’s promised to game-changing on how we develop our React apps. Let’s look at some cool tricks with Suspense in the current version of React (16.8.6).

React.Suspense let you specify the loading indicator in case some components in the tree below it are not yet ready to render. Today, lazy loading components is the only use case supported by <React.Suspense>.

Currently, React.Suspense takes a single prop which is fallback, this is triggered whenever a Promise is propagated up to your Suspense fallback block. Not making sense? Don’t worry I’ll show you how simple it is below with working samples.

Lazy Loading is one of the most simple and effective ways to speed up the load time of your bundles. With React.lazy this is easier than ever and combined with Suspense it’s effortless.

To lazy load a component we just need to modify a regular import slightly:

import SomeComponent from ‘./SomeComponent’; 

Becomes:

const SomeComponent = React.lazy(() => import(‘./SomeComponent’; ));  

This now resolves as a promise (and if you check your network tab you’ll see you actually made a request for a small bundle of js).

If the module containing the SomeComponent is not yet loaded by the time your component is rendering, we must show some fallback content while we’re waiting for it to load - such as a loading indicator. This is done using the Suspense component.

Wrap your imported component in a Suspense block and as it’s loading we will see the Loading component we pass as the fallback prop.

React Router & Suspense

One of the easiest ways to turbocharge your app when using React Router is using lazy loading, thanks to Suspense it’s easier than ever.

Let’s show you what it takes to convert normal routes into a super fast lazy loaded app:

You can play with the code here.

Make the web a faster place by making sure to code split anywhere possible. Since you only need your initial route first it’s always wasteful to bundle up routes that your user may never actually hit.

Note:

React.lazy and Suspense are not yet available for server-side rendering. If you want to do code-splitting in a server-rendered app, it is recommended to use Loadable Components. It has a nice guide for bundle splitting with server-side rendering.

Thanks for reading!