Saturday, April 20, 2019

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'));

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