React Lazy Routing

React routing is pretty straightforward and well documented feature. The example of usage is here
https://jsfiddle.net/AndrewBuntsev/3n5rmL0o/

If we need to load components only when they are needed we can utilize the code splitting techique with lazy() function and Suspense component

lazy() function loads the component no earlier than it is required

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

1. const Users = React.lazy(() => import('./Users'));

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

Suspense displays a loading component

  
render(
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Users />
      </Suspense>
    </div>
  );

1. render(
2. <div>
3. <Suspense fallback={<div>Loading...</div>}>
4. <Users />
5. </Suspense>
6. </div>
7. );

render(
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Users />
      </Suspense>
    </div>
  );