# jamiebuilds/react-loadable

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jamiebuilds-react-loadable).**

16,525 stars · 759 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/jamiebuilds/react-loadable
- awesome-repositories: https://awesome-repositories.com/repository/jamiebuilds-react-loadable.md

## Topics

`async` `babel-plugin` `code-splitting` `imports` `loading` `react` `server-side-rendering` `ssr` `webpack`

## Description

react-loadable is a React component lazy loader and JavaScript bundle orchestrator designed to manage the delivery of asynchronous components. It provides a bridge for server-side rendering to coordinate dynamic module preloading and prevent content flicker during client hydration.

The project includes a dynamic component preloader to trigger background fetches of visual components before they are required on screen. It utilizes a system to map individual modules to their respective bundles, ensuring the correct assets are delivered.

The library covers code splitting workflows and asynchronous resource management. This includes handling parallel resource fetching and rendering temporary loading states while fetching modules.

## Tags

### User Interface & Experience

- [Asynchronous Component Wrappers](https://awesome-repositories.com/f/user-interface-experience/functional-components/higher-order-components/asynchronous-component-wrappers.md) — Provides a higher order component that renders fallback states until module promises resolve.
- [Lazy Loaders](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/lazy-loaders.md) — Provides a higher order component for asynchronously loading React components using promises.
- [Component Preloaders](https://awesome-repositories.com/f/user-interface-experience/dynamic-component-rendering/component-preloaders.md) — Triggers background fetches of visual components before they are required on screen.

### Development Tools & Productivity

- [Bundle-to-Module Mappings](https://awesome-repositories.com/f/development-tools-productivity/source-bundling/module-bundling/bundle-to-module-mappings.md) — Implements a manifest system to map individual modules to their physical JavaScript bundle files.

### Web Development

- [Code Splitting](https://awesome-repositories.com/f/web-development/dynamic-loading-strategies/code-splitting.md) — Divides the application into smaller bundles that load on demand based on user interaction or routing.
- [Bundle Orchestrators](https://awesome-repositories.com/f/web-development/javascript-bundling-workflows/bundle-orchestrators.md) — Maps individual modules to their respective bundles to ensure correct asset delivery.
- [On-Demand Component Loading](https://awesome-repositories.com/f/web-development/on-demand-component-loading.md) — Fetches and displays components on demand to reduce initial bundle size and improve load times.
- [Client-Side Hydration](https://awesome-repositories.com/f/web-development/rendering-templating/rendering-patterns/client-side-hydration.md) — Coordinates the handoff between server-rendered HTML and client-side JavaScript to prevent flickering.
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Coordinates dynamic module preloading on the server and captures output for seamless client transitions. ([source](https://cdn.jsdelivr.net/gh/jamiebuilds/react-loadable@master/README.md))
- [Hydration Bridges](https://awesome-repositories.com/f/web-development/server-side-rendering/hydration-bridges.md) — Coordinates dynamic module preloading on the server to prevent content flicker during client hydration.
- [Output Capturing](https://awesome-repositories.com/f/web-development/server-side-rendering/output-capturing.md) — Records rendered HTML of dynamic components on the server to prevent content mismatch during hydration.
- [Asynchronous UI State Handling](https://awesome-repositories.com/f/web-development/asynchronous-ui-state-handling.md) — Handles loading states and fallback content during the parallel fetching of asynchronous resources.
- [Concurrent Resource Fetching](https://awesome-repositories.com/f/web-development/concurrent-resource-fetching.md) — Triggers multiple asynchronous requests in parallel and resolves them into a single data set for the UI.
- [Parallel Resource Fetching](https://awesome-repositories.com/f/web-development/data-fetching-caching/data-fetching/parallel-resource-fetching.md) — Retrieves multiple data sources simultaneously and processes combined results through a custom display function. ([source](https://cdn.jsdelivr.net/gh/jamiebuilds/react-loadable@master/README.md))
- [Dynamic Content Loading](https://awesome-repositories.com/f/web-development/dynamic-content-loading.md) — Renders temporary loading states while fetching modules and transitions to final content upon completion. ([source](https://cdn.jsdelivr.net/gh/jamiebuilds/react-loadable@master/README.md))
- [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Reduces JavaScript delivery by preloading critical visual components in the background.
- [Module Preloaders](https://awesome-repositories.com/f/web-development/resource-preloading/module-preloaders.md) — Initiates network requests for JavaScript bundles before the components are required for rendering.
- [Viewport-Based Preloading](https://awesome-repositories.com/f/web-development/viewport-based-preloading.md) — Triggers background loading of visual components before they enter the viewport to reduce latency. ([source](https://cdn.jsdelivr.net/gh/jamiebuilds/react-loadable@master/README.md))