Almost There: loadable-components Has the Right Idea

React's go-to code-splitting library is solving a real problem — but a few rough edges are holding it back.

Your React app loads fine in development. Then you ship it, and a first-time visitor on a mid-range phone stares at a blank screen for three seconds before anything appears. That gap — between what developers see locally and what users experience in the real world — is exactly the problem code splitting was invented to solve.

Setting

Code splitting is the practice of breaking a large JavaScript bundle (think: the single giant file your app ships as) into smaller chunks that load only when the user actually needs them. React has supported this natively since 2018 via React.lazy, but that built-in approach has one hard limitation: it does not work with server-side rendering, or SSR (the technique where the server sends pre-built HTML to the browser instead of making the browser do all the work from scratch).

That gap is what loadable-components was built to fill. Created by Greg Berge, the library describes itself as "the recommended Code Splitting library for React" — and for a long time, it genuinely was. With 7,800+ GitHub stars and topics spanning SSR, dynamic imports, and React Router integration, it sits at an important intersection of performance and developer experience.

The Story

Here is what the library actually does in practice. Imagine you have a React dashboard with a heavy chart component — a library like Recharts (a tool for drawing data visualizations) that weighs 150 KB on its own. Without code splitting, every visitor downloads that 150 KB even if they never open the chart tab. With loadable-components, you write:

import loadable from '@loadable/component';
const Chart = loadable(() => import('./Chart'));

Now the chart code only downloads when the user navigates to that section. The first page loads faster. Users on slow connections get a real experience instead of a loading spinner that hides a 400 KB wall of JavaScript.

What makes loadable-components stand out over React's native React.lazy is that it handles SSR without breaking. When your server pre-renders HTML, the library correctly injects the right <script> tags so the browser knows which chunks to load — preventing the flicker that happens when SSR and client-side code disagree about what's on screen.

For teams using React Router (the standard library for navigation in React apps), loadable-components also slots in cleanly: each route can be its own chunk, so the home page never pays the cost of loading the settings page bundle.

The Insight

Here is where the "Almost There" lens matters. The premise is solid. The problem is real, the solution works, and the star count reflects genuine community trust. But spending time in the repository reveals three specific friction points that prevent this from being the obvious, frictionless choice it should be.

First: the documentation gap between the library and modern React. The React team now recommends frameworks like Next.js or Remix that handle SSR code-splitting internally. The loadable-components docs do not clearly address when you still need this library versus when the framework already handles it for you. New developers hit that question immediately and leave without an answer.

Second: the last meaningful commit story is murky. The last push was May 2025, which is recent — but issues and community discussions suggest that maintenance has been uneven, with some open pull requests sitting for months. "Last pushed" and "actively maintained" are not the same thing, and the project does not clearly signal its current maintenance posture.

Third: no clear migration path for React.lazy users. For someone already using React.lazy who wants to add SSR, there is no dedicated "here's what to swap and why" guide. The library assumes you're starting fresh or coming from the older react-loadable library (a predecessor it was designed to replace), not from the current React baseline.

These three things — a "do I actually need this?" decision guide, a transparent maintenance signal (even a simple MAINTENANCE.md), and a React.lazy → loadable migration doc — would make this library dramatically easier to adopt in 2025.

The underlying engineering is not the problem. The wrapper around it is.

If you're a maker weighing whether to add a dependency, clarity about why now and what happens if the maintainer steps back matters as much as the code quality. loadable-components earns its stars. It just hasn't finished earning its onboarding.

Have thoughts on where this library stands today? Drop them at teum.io/stories or reply on Threads — especially if you've shipped something with it recently.

한국어 요약

loadable-components는 React의 코드 분할(번들을 쪼개 필요한 코드만 불러오는 기법), 특히 SSR 환경에서의 한계를 실용적으로 해결하는 라이브러리입니다. 아이디어와 구현 자체는 탄탄하지만, "내가 정말 이게 필요한가?"를 알려주는 가이드 부재, 유지보수 상태의 불투명함, React.lazy에서의 마이그레이션 문서 부족이 아쉽습니다. 이 세 가지만 채워진다면 2025년에도 충분히 경쟁력 있는 선택지가 될 수 있습니다.

The underlying engineering is not the problem. The wrapper around it is.