Skip to main content

loadable()

function loadable<T>(importFunc: () => Promise<{
  default: T;
}>, fallback?: ReactNode): (props: any) => Element;

Creates a lazily-loaded React component for code splitting. Wraps the component in Suspense with a customizable fallback.

Type Parameters​

T​

T extends ComponentType<any>

Component type

Parameters​

importFunc​

() => Promise<{ default: T; }>

Dynamic import function that returns the component

fallback?​

ReactNode = ...

React element to show while loading (defaults to WaitMessageLauncher)

Returns​

Lazy-loaded component

(props: any) => Element

Example​

// Basic usage
const Dashboard = loadable(() => import('./Dashboard'));

// Custom loading fallback
const Settings = loadable(
  () => import('./Settings'),
  <div>Loading settings...</div>
);

// Use in routes
<Route path="/dashboard" component={Dashboard} />