Use React.lazy to do code-splitting with React Suspense
A new way of doing code-splitting in React apps has been released in React v16.6.0. It allows us to use Suspense tag with dynamic import statements to send heavy components over the wire to the user when they are needed and not before.
In this example we are going to see how to use React.lazy and Suspense to avoid sending whole of lodash and moment JS libraries and instead do it once it's actually necessary.
Instructor: [00:00] We have a simple React component which has state by default is clicked set to false. We also have a button. After we'll click this button, we're going to set the state of this component to true. We also have a header which tells us whether the button has been clicked or not. By default, clicked is set to false. After I click the button, it's going to be set to true.
[00:27] There are also two components imported here. One is time. The other one is month. If we take a look in the time component, we'll see that it imports moment only to display a date. The month component over here, it's importing the whole of Lodash just to add two numbers together. They are quite heavy.
[00:48] We want to display those components only when the button has been clicked. When the state is set to clicked, we're going to display a <div>. Inside of this <div>, we're going to have our time and month components. There we go. We can save it. After I click the button, we have the current time and the magic number.
[01:09] Let's take a look into DevTools. You can see that after I refresh the page, whole of our app is downloaded as a single chunk, even though I'm displaying those time and month components, which are quite heavy, only after I click the button.
[01:25] We can fix this. To fix this, import lazy and Suspense from the newest version of React. We are going to import those two components in a different way. We're going to create a const set to lazy function which takes another function as an argument, which is going to be a dynamic import of the time component.
[01:49] We're going to do exactly the same for month. Remove those two imports and wrap those two heavy components inside of a Suspense component. You also need to provide a fallback. Fallback is a piece of JSX which is going to be displayed whenever those two components are being loaded. In this case, it's going to be a header which says "Loading."
[02:15] I'm going to refresh this page. You're going to notice that the first chunk is actually a bit smaller. Those two heavy components are loaded only after I click the button. They are over here. This happens because the Suspense component uses lazy dynamic import to download those two heavy time and month components only after I click the button and not before.