@loadable/component

loadable

Create a loadable component.

ArgumentsDescription
loadFnThe function call to load the component.
optionsOptional options.
options.fallbackFallback displayed during the loading.
options.ssrIf false, it will not be processed server-side. Default to true.
options.cacheKeyCache key function (see dynamic import)
import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))

lazy

Create a loadable component "Suspense" ready.

ArgumentsDescription
loadFnThe function call to load the component.
import { lazy } from '@loadable/component'
const OtherComponent = lazy(() => import('./OtherComponent'))

LoadableComponent

A component created using loadable or lazy.

PropsDescription
fallbackFallback displayed during the loading.
...Props are forwarded as first argument of loadFn

LoadableComponent.preload

Triggers the loading of a component.

ArgumentsDescription
argsProps passed to the load function.
import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
OtherComponent.preload()

This method does not return a Promise intentionnally. Use load if you need to wait for the component to be loaded.

LoadableComponent.load

Force the loading of a component synchronously, returns a Promise.

ArgumentsDescription
argsProps passed to the load function.
import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
OtherComponent.load().then(() => {
console.log('Component is loaded!')
})

If you don't need to know when the component will be loaded, you should use preload instead.

loadable.lib

Create a loadable library.

ArgumentsDescription
loadFnThe function call to load the component.
optionsOptional options.
options.fallbackFallback displayed during the loading.
options.ssrIf false, it will not be processed server-side. Default to true.
options.cacheKeyCache key function (see dynamic import)
import loadable from '@loadable/component'
const Moment = loadable.lib(() => import('moment'))

lazy.lib

Create a loadable library "Suspense" ready.

ArgumentsDescription
loadFnThe function call to load the component.
import { lazy } from '@loadable/component'
const Moment = lazy.lib(() => import('moment'))

LoadableLibrary

A component created using loadable.lib or lazy.lib.

PropsDescription
childrenFunction called when the library is loaded.
refAccepts a ref, populated when the library is loaded.
fallbackFallback displayed during the loading.
...Props are forwarded as first argument of loadFn

loadableReady

Wait for all loadable components to be loaded. This method must only be used with Server Side Rendering, see Server Side Rendering guide.

ArgumentsDescription
doneFunction called when all components are loaded.
optionsOptional options.
options.namespaceNamespace of your application (use only if you have several React apps on the same page).
import { loadableReady } from '@loadable/component'
loadableReady(() => {
const root = document.getElementById('main')
hydrate(<App />, root)
})