Million.js: Making React Components Run Up to 70% Faster

You love React, but you also know the feeling when a component tree starts to lag. Maybe you're rendering a huge list, doing real-time updates, or just pushing a bit too much state through too many components. That's where Million.js steps in.

It's not a new framework. It's not a rewrite of React. Million.js is a drop-in virtual DOM replacement that makes your existing React components run significantly faster. The performance gains can be dramatic—up to 70% in some cases. And the best part? You barely have to change your code.

What It Does

Million.js replaces React's default reconciliation engine with a hand-optimized, lightweight virtual DOM. Instead of comparing virtual trees on every render (which React does via its diffing algorithm), Million uses a compile-time optimization called "block tree" to precompute which parts of the DOM can change and which are static. The result is fewer checks, less memory overhead, and smoother updates.

It's designed to work with React 18+ and supports functional components, hooks, and most of the React ecosystem. You wrap your app (or specific components) with a Block component, and Million takes over the rendering for that subtree.

Why It's Cool

• Drop-in performance. No need to switch to Solid, Svelte, or write custom memoization. If you know React, you already know Million.
• Compile-time magic. Million uses a Babel plugin to statically analyze your components and build a faster update path. This isn't a runtime hack—it's a smarter approach to reconciliation.
• Fine-grained control. You can use it on the whole app or just on specific hot paths, like large lists or frequently updating components.
• Small bundle impact. The library itself is around 6KB gzipped, so you're not trading performance for payload size.
• Active and open source. The repo has over 17,000 stars and a growing community. It's not some abandoned experiment.

How to Try It

Getting started is straightforward. First, install the package:

npm install million

Then add the Babel plugin to your config (or use the automatic setup with Vite or Next.js). The simplest way is to wrap a component:

import { block } from 'million/react';

const FastList = block(function List({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
});

That's it. The block wrapper tells Million to take over the rendering for that component tree. Everything else stays the same.

You can also use it globally by replacing React's reconciler (check the repo for the full setup). For a quick demo, clone the repo and run the example:

git clone https://github.com/aidenybai/million.git
cd million
pnpm install
pnpm dev

Final Thoughts

Million.js is one of those tools that feels like it should be more complicated than it is. You drop it into a React project, and things just get faster. No big refactors, no new mental model to learn.

It's not a silver bullet. If your app is already highly optimized with proper memoization and virtualization, the gains might be smaller. But for the large majority of React apps—especially those with heavy re-renders, big lists, or complex state—this is a genuinely useful optimization.

If you're maintaining a React project and have ever muttered "why is this re-rendering so much," give Million a try. It might save you more than just performance.

Follow us on Twitter: @githubprojects