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;

### Parameters​

#### props​

`any`

### Returns​

`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} />