React Loadable

React Loadable is a higher-order component library for React that enables dynamic code splitting and lazy loading of components using dynamic imports. It provides a declarative API for loading components asynchronously with customizable loading states, error handling, and server-side rendering support.

The library helps reduce initial bundle sizes by splitting code at the component level, allowing applications to load only the necessary components when they are needed. It includes utilities for Babel and Webpack integration, supports timeout handling for slow network connections, and provides preloading capabilities for improved user experience.

Package Information

• Package Name: react-loadable
• Package Type: npm
• Language: JavaScript
• Installation: npm install react-loadable
• Peer Dependencies: react

Core Imports

import Loadable from 'react-loadable';

For CommonJS:

const Loadable = require('react-loadable');

Basic Usage

import React from 'react';
import Loadable from 'react-loadable';

// Loading component
function Loading(props) {
  if (props.error) {
    return <div>Error! <button onClick={props.retry}>Retry</button></div>;
  } else if (props.pastDelay) {
    return <div>Loading...</div>;
  } else {
    return null;
  }
}

// Create loadable component
const LoadableComponent = Loadable({
  loader: () => import('./MyComponent'),
  loading: Loading,
  delay: 200,
  timeout: 10000,
});

// Use in render
function App() {
  return (
    <div>
      <h1>My App</h1>
      <LoadableComponent />
    </div>
  );
}

Architecture

React Loadable is built around several key components:

• Higher-Order Components: Loadable and Loadable.Map create component wrappers that handle dynamic loading
• Loading States: Comprehensive state management for loading, error, delay, and timeout conditions
• Server-Side Rendering: Built-in SSR support with module tracking and preloading utilities
• Build Tool Integration: Babel plugin for automatic module resolution and Webpack plugin for bundle mapping
• Preloading System: Static preload methods and global preloading utilities for performance optimization

Capabilities

Dynamic Component Loading

Core functionality for creating loadable components that split code at the component level. Perfect for reducing initial bundle sizes and implementing lazy loading.

function Loadable(options: LoadableOptions): LoadableComponent;

interface LoadableOptions {
  loader: () => Promise<any>;
  loading: LoadingComponent;
  delay?: number;
  timeout?: number;
  render?: (loaded: any, props: any) => React.ReactElement;
  webpack?: () => number[];
  modules?: string[];
}

Dynamic Loading

Multi-Resource Loading

Load multiple resources in parallel with Loadable.Map, enabling complex loading scenarios where components depend on multiple modules or data sources.

function LoadableMap(options: LoadableMapOptions): LoadableComponent;

interface LoadableMapOptions {
  loader: { [key: string]: () => Promise<any> };
  loading: LoadingComponent;
  render: (loaded: { [key: string]: any }, props: any) => React.ReactElement;
  delay?: number;
  timeout?: number;
  webpack?: () => number[];
  modules?: string[];
}

Multi-Resource Loading

Server-Side Rendering

Comprehensive SSR support including module capture, preloading utilities, and bundle mapping for seamless server-client hydration.

class Capture extends React.Component {
  static propTypes: {
    report: (moduleName: string) => void;
    children: React.ReactNode;
  };
}

function preloadAll(): Promise<void>;
function preloadReady(): Promise<void>;

Server-Side Rendering

Build Tool Integration

Babel plugin for automatic module resolution and Webpack plugin for generating bundle manifests, simplifying the setup for server-side rendering.

// Babel plugin: react-loadable/babel
// Webpack plugin
class ReactLoadablePlugin {
  constructor(options: { filename: string });
}

function getBundles(stats: any, modules: string[]): Bundle[];

Build Integration

Types

interface LoadingComponentProps {
  isLoading: boolean;
  pastDelay: boolean;
  timedOut: boolean;
  error: Error | null;
  retry: () => void;
}

interface LoadableComponent extends React.Component {
  static preload(): Promise<any>;
}

interface Bundle {
  id: number | string;
  name: string;
  file: string;
  publicPath: string;
}