Use React.lazy to do code-splitting with React Suspense

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.