Lazy Loading In React


Home -> Login/Register -> User Dashboard -> Logout

import Landing from ‘./Components/Layout/Landing’;
const Login = React.lazy(() => import(‘./Components/Login’));
export default Login;
 export const abc = className; **Not Valid **
import React,{Suspense} from ‘react’;
<Suspense fallback={<div>Loading…</div>}><Login /></Suspense>
Login Component rendered using React.lazy and Suspense
The 1.chunk gets called when the component in dynamically imported
import React, { Component } from ‘react’;const lazyLoader = (importComponent) => {
 return class extends Component {
 state = {
 component: null
 }
 componentDidMount () {
 importComponent().then(cmp => {
 this.setState({component: cmp.default});
 });
 }
 render () {
 const CustComponent = this.state.component;
 return CustComponent ? <CustComponent {…this.props} /> : null;
 }
 }
 }
 export default lazyLoader;
const AsyncRegister = lazyComponentLoader(() => import(‘./Components/Register’));
The Register Component rendered using our custom HOC
2.chunk gets loaded

Data Driven Investor

from confusion to clarity, not insanity

Abhimanyu Chauhan

Written by

A JS Enthusiast, with a passion for travelling and writing.

Data Driven Investor

from confusion to clarity, not insanity