lazy()

Creates a loadable() component which is loaded automatically when it is rendered for the first time. Basically, this utility calls .load() method or a loadable component automatically, when it is being rendered for the first time.

Use it exactly the same as loadable(), the only difference is that it will automatically .load() on first render.

However, you still have access to the .load() method, which allows you "pre-load" your components ahead of time, if necessary. This ways — when your component is rendered for the first time — you will not experience a network delay.

Example

Below MyComponent will be resolved and rendered in place of LazyMyComponent.

const loader = () => new Promise(resolve => resolve(MyComponent));

const LazyMyComponent = lazy({loader});

<LazyMyComponent />

This feature allows you to do code-splitting — to load your components only when they are actually rendered for the first time. Below code will load and render MyComponent in place of LazyMyComponent, but only when LazyMyComponent was actually rendered for the first time.

const loader = () => import('./MyComponent'); // Assuming it is exports as default export.

const LazyMyComponent = lazy({loader});

<LazyMyComponent />

Above code assumes your component was exported as default exports, if its not you would modify your code as so:

const loader = () => import('./MyComponent').then(module => module.MyComponent);

const LazyMyComponent = lazy({loader});

<LazyMyComponent />

You can also use .load() method, to pre-load your component ahead of time.

LazyMyComponent.load();

By default, while your component is loading, nothing will be rendered, but you can display a loading text instead.

const LazyMyComponent = lazy({
  loader,
  loading: 'MyComponent is loading...'
});

Or any other React component:

const LazyMyComponent = lazy({
  loader,
  loading: <LoadingSpinner />
});

If error happens during loading, and .error() param is called, it receives a single error argument, and expects back a component to be rendered on error, or null.

const LazyMyComponent = lazy({
  loader,
  loading: <LoadingSpinner />,
  error: (error) => {
    console.error('Error while loading MyComponent: ', error);

    return LoadingError;
  },
});

For more features see delayed higher-order-component, which works the same as lazy() but provides more options.