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
This is an updated post to show how to load components dynamically using
React.lazy, which wraps around
import() and retrieves a default component.
I will skip problem statements in this entry to keep it short.
|Case 1 - Loading React Components Dynamically|
|Case 2 – Handling Different Data Types|
|Case 3 – Loading Components on Demand|
🚀 Case 1 – Loading React Components Dynamically
In the previous version, I’ve loaded components in
App.js and stored components in a state called
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#3 imports all event components that are exported from
index.js, which basically does a named exports of lazily loaded components.
Line #12 checks 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 #18 uses Suspense to wrap dynamically loaded components and shows a fallback UI,
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
index.js lazily loads
*Event components and does a named exports so that events can be looked up as a dictionary.
NullEvent is a dumb component that doesn’t return anything using a React.Fragment shortcut
🚀 Case 2 – Handling Different Data Types
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
If a matching GitHub event component is found load it or else load a
<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 the previous post and the difference is the
index.js, which exports lazily loaded components to enable event name matching by key in
🚀 Case 3 – Loading Components on Demand
A few changes made since the last post.
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).
render is also changed to wrap dynamically loaded components with
*View components are the same so I will only show
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
👋 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 the previous post.