How to configure Lazy Loading in REACT 16+

  In react we can achieve lazy loading after performing some steps.

Let's start

Step 1:- We need to import the Suspense component 

- Now here I have imported Suspense component from react

         import React, {Component, Suspense} from 'react';

Step 2: We need to change the way of importing Component in React

- Now we are importing our other components here. I'm importing the Login and register component here.

- Here we are using React.lazy() method 

const Register = React.lazy(() => import('./containers/auth/register/register'))

const Login = React.lazy(() => import('./containers/auth/login/Login'))

Step 3: Now we need to declare our routes 

Here we are using Suspence for declaring component. 

<Route path={'/'} render={() => 

<Suspense fallback={<div>Loading....</div>}>

            <Login />

          </Suspense>} exact/>

        <Route path={'/register'} render={() => 

         <Suspense fallback={<div>Loading....</div>}>

          <Register />

         </Suspense>} />

If you guys have any query then you can drop a mail to us on this mail id:

techoswag@gmail.com