delayed.md

delayed()

Works similar to lazy() method but it can postpone loading or rendering of the component.

Delaying rendering is useful to prevent FOUC in some cases, for example, if you are using CSS modules with Webpack.

Delaying loading is useful if your component is not very important and you want to use CPU resources for other things or start loading the component only on browser idle time.

Using default params with this function is equivalent to using lazy() function.

Examples

Lazy load a component and prevent FOUC.

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

const LazyMyComponent = lazy({
  loader,
  draf: true
});

<LazyMyComponent />

Lazy load an unimportant component only after 200ms after it was first rendered on browser idle time.

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

const LazyMyComponent = lazy({
  loader,
  idle: true,
  delay: 200
});

<LazyMyComponent />

Reference

delayed() works exactly as lazy(), but accepts these additional parameters.

• delay — time in milliseconds to wait before starting to load a component, defaults to 0.
• draf — whether to wait for DRAF before rendering component after it has been loaded, useful to prevent FOUC in some cases, if CSS is bundled with your component, defaults to false.
• idle — whether to start loading component on JavaScript idle time using requestIdleCallback, defaults to false.