manivelarjunan

import React, { Component } from 'react';
import Person from './Person/Person';
import './App.css';

class App extends Component {
  state = {
    persons: [
      {name:'mani',age:45},
      {name:'papi',age:34}
    ]

manivelarjunan

import React, { Component, Suspense } from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';

import Welcome from './containers/Welcome';
import Home from './containers/Home';
//import Details from './containers/Details';
// Above import loads on load and adds dependencies globally. so it should be commented/removed for lazy loading component.
const Details = React.lazy(() => import('./containers/Details'));
// Lazy loading import doesn't allow Named component.
class App extends Component {

manivelarjunan

import React, { Component, Suspense } from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';
import Welcome from './containers/Welcome';
import Home from './containers/Home';
//import Details from './containers/Details';

const Details = React.lazy(() => import('./containers/Details'));

class App extends Component {

manivelarjunan

import React, { Component} from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';

import Welcome from './containers/Welcome';
import Home from './containers/Home';
import asyncComponent from './containers/hoc/asyncComponent';
//import Details from './containers/Details';

const AsyncComponent = asyncComponent(() => {
     // Pass the component which you want to load dynamically. 

manivelarjunan

import React, {Component} from 'react';

const asyncComponent = (importComponent) => {
    return class extends Component {
        state = {
            component : null
        };

        componentDidMount() {