Lazy loading React component

Lazy loading is sometime smart choice and very convenient way to load some react classes. We will try to explain it in next steps.

Below is javascript code which is in charge for lazy loading. You can see that we have very simple javascript function which accept one parameter and dynamical generate react anonymous class. This class has two method, componentDidMount and render.
In componentDidMount we implemented loading, and in render method we using react class which is loaded by  componentDidMount. In order to understand how it works you have to understand react component lifecycle.

Example of implementation is below.

In react class where we want to use lazy loading we can implement it on next way:

You can see that we implemented Lazycomponent in render method, our component will be loaded in componentDidMount.

 

Lazy loading you can see with <Route /> component, then component will be loaded only for specific route / url.

For example:

If you have any questions please comment.

You may also like...

Leave a Reply