Learn React Hooks

Implementing React.lazy

Next, we are going to implement lazy loading for the Logout component by wrapping it with React.lazy(), as follows:

1. Edit src/user/UserBar.js, and remove the import statement for the Logout component:

import Logout from './Logout'

2. Then, define the Logout component via lazy loading:

const Logout = React.lazy(() => import('./Logout'))

The import() function dynamically loads the Logout component from the Logout.js file. In contrast to the static import statement, this function only gets called when React.lazy triggers it, which means it will only be imported when the component is needed.

If we want to see lazy loading in action, we can set Network Throttling to Slow 3G in Google Chrome:

Setting Network Throttling ...