Lazy loading components in React v16.6

The latest version of React 16.6.0 introduces some great new API additions. One of the new additions is React.lazy(). This new API can be used to load components only when you want to render them and it will also reduce the bundle size.

How it works?

Previously we were importing a component like this:

  
  
import MyComponent from './MyComponent';
 

With the new API we can do something like this:

  
  
import { lazy } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
 

If you want to provide a fallback component that will be shown while the component is loading, you can use the Suspense API.
Here is a simple example for that:

  
  
import { lazy, Suspense } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Component is loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}
 

Andy

Front-end Engineer & Designer based in Dublin currently working @IBM.
I write about: Javascript, HTML, CSS, React JS, React Native and UI/UX Design.

Add comment