react-loadable
A React helper that loads components on demand using promises, to shrink your initial bundle.
- Stars
- 16.5k
- Forks
- 758
- Licence
- MIT
- Language
- JavaScript
- Last update
- 2.3 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
React Loadable is a small higher-order component: a function that wraps another component so it is loaded only when it is needed. You give it a loader that uses dynamic import(), plus a loading component to show while the code arrives. The README says it is used to split a large app bundle into smaller pieces so the page loads faster.
- Wrap a heavy map or chart component so it loads only when the user opens its tab
- Show a loading placeholder while a route-level component is fetched
- Defer a page footer's libraries so the top content loads first
- Display a custom loading or error component while the code loads
Great for
- React developers whose main JavaScript bundle has grown large
- Apps that use Webpack and want component-level code splitting
- Teams who want to lazy-load modals, tabs, or heavy widgets that many users never open
- Projects that need server-side rendering with code splitting
Not ideal for
- Projects not using React, since the library is built around React components
- Projects not using a bundler that supports dynamic import(), such as Webpack 2+, because the README ties automatic splitting to it
- Developers looking for an actively maintained option, since the README does not state a current maintenance status and the last push date is 2024-07-10
How to get it
- 1
Install with a package manager
You'll need: Node.js · Yarn or npm · React · A bundler that supports import() such as Webpack 2+
Install the package
yarn add react-loadable - 2
Run it
- Install the package with yarn add react-loadable
- Create a loading component that renders a simple placeholder
- Wrap your target component with Loadable, passing a loader that calls import() and the loading component
- Render the returned component where you previously used the original one
- 3
Get the most out of it
- Use import() with Webpack 2+ to get automatic code splitting with no extra configuration, as the guide describes
- Split at component boundaries such as modals and tabs, not only at routes
- Write a loading component that handles error states and timeouts, as the guide recommends
- Check the related react-loadable-ssr-addon project if you need server-side rendering to load chunk files and CSS automatically
Downloads
Strengths
- Small API: one Loadable call with a loader and a loading component
- The README shows example bundle size reductions reported by users, though these are anecdotal
- Handles loading states without writing the import and state logic by hand
Trade-offs
- The README notes the library is also meant to help with server-side rendering, but it gives little detail on setup for that
- The README's loading-component section is incomplete and the example is cut off, so some guidance is unclear
- Newer React features such as lazy and Suspense are not discussed in the README, so readers should check whether they fit their project
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-loadable (this) | 16.5k | Library | intermediate | 2.3 years ago | React developers whose main JavaScript bundle has grown large |
| ice | 18.6k | Framework | intermediate | 7 months ago | Developers who already know React and want a ready-made project structure |
| async | 28.1k | Library | intermediate | 4 days ago | JavaScript developers who need to run many asynchronous operations over a collection of items |
| leptos | 21.5k | Library | advanced | 4 days ago | Rust developers who want to build full web apps in one language |
| emotion | 18k | Library | intermediate | 14 days ago | React developers who want styles colocated with components |
| pinia | 14.8k | Library | beginner | 10 days ago | Vue 3 developers who need shared state across several components |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.