Loading React Components Dynamically on Demand using React.lazy

React v16.6.0 introduced React.lazy for code splitting.

Previous post, Loading React Components Dynamically on Demand showed how to load components dynamically enabling code splitting using import() .

This is an updated post to show how to load components dynamically using React.lazy , which wraps around import() and retrieves a default component.

Note

I will skip problem statements in this entry to keep it short.

Problem Statements Case 1 - Loading React Components Dynamically Case 2 – Handling Different Data Types Case 3 – Loading Components on Demand

:rocket: Case 1 – Loading React Components Dynamically

You can follow along in CodeSandbox & check the deployed site for coding splitting in devtools.

In the previous version, I’ve loaded components in componentDidMount inside App.js and stored components in a state called components .

But there is no need to store the components in the state as you can simply use lazily loaded component in render with smaller code.

Line#3imports all event components that are exported from index.js , which basically does a named exports of lazily loaded components.

Line #12checks if an event passed via prop exists. If an event doesn’t exist, it uses a NullEvent (which returns an empty component) instead of checking for a non-existent event in “catch” as I did in previous implementation.

Line #18uses Suspense to wrap dynamically loaded components and shows a fallback UI, <div>Loading...</div> .

Suspense is used to wait for/show loading indicator in case it takes too long to load lazily loaded components.

⚠ Note : This version of Suspense is not for fetching only for code splitting.

Refer to Dan Abramov’s tweet .

And here is the updated *Event components.

index.js lazily loads *Event components and does a named exports so that events can be looked up as a dictionary.

Note that NullEvent is a dumb component that doesn’t return anything using a React.Fragment shortcut <></> .

case1 in action

:rocket: Case 2 – Handling Different Data Types

You can follow along in CodeSandbox & check the deployed site for coding splitting in devtools.

This patterns now looks almost the same as the first case.

Instead of loading components in componentDidMount in the previous version , the updated one takes advantage of React.lazy and loads components in render instead.

If a matching GitHub event component is found load it or else load a NullEvent .

<Suspense /> wraps lazily loaded components as it did in case 1.

Here is are the event components for completeness.

*Event components are the same as in theprevious post and the difference is the index.js , which exports lazily loaded components to enable event name matching by key in App.render() .

case2 in action

:rocket: Case 3 – Loading Components on Demand

You can follow along in CodeSandbox & check the deployed site for coding splitting in devtools.

A few changes made since the last post.

addView

Instead of loading a NullView in a catch statement, it’s now checked against a dictionary, which is better programming practice and makes the code more readable.

loadedComponents is also changed from an array to an object for more efficient look up (from Array.includes to key lookup).

From this,

To this.

render

render is also changed to wrap dynamically loaded components with <Suspense /> .

All *View components are the same so I will only show components/views/index.js .

Just like previous two cases, index.js exports lazily imported components as a named export so that view can be looked up by a key in addView in App.js .

:wave: Parting Words

This is just an updated post as the previous version still works.

The differences are I’ve added index.js to export lazily loaded components and use them to look up by a key to decide whether to load a matching component or a null component.

I tried not to make changes in dynamically loaded components not to confuse if you already read theprevious post.