Loading React Components Dynamically on Demand using React.lazy
source link: https://www.tuicool.com/articles/hit/uyEVB33
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Photo by Holger Link on Unsplash
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 <></>
.
: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()
.
: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.
Resources
Case 1 – Loading React Components Dynamically
– Demo
Case 2 – Handling Different Data Types
– Demo
Case 3 – Loading Components on Demand
– Demo
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK