Million.js — Make React 70% Faster with a Compiler-Driven Virtual DOM

What it is

Million.js is a compiler that optimizes React components by replacing the standard virtual DOM diffing with a block-based approach. It analyzes your JSX at build time, identifies static and dynamic parts, and generates code that skips unnecessary diffs. The result is up to 70% faster renders on list-heavy UIs with zero changes to most components.

React developers working on data-intensive dashboards, large tables, and list-heavy interfaces benefit most from Million.js. It plugs into existing React projects as a compiler plugin without requiring you to rewrite components.

How it saves time or tokens

Million.js is a build-time optimization that requires no runtime overhead and no code changes for most components. You add it as a plugin to your bundler configuration, and it automatically optimizes eligible components. This saves engineering time that would otherwise go into manual performance tuning, memoization, and virtualization.

How to use

1. Install Million.js and the compiler plugin for your bundler (Vite, Next.js, or webpack).
2. Add the plugin to your build configuration.
3. Optionally annotate performance-critical components with the block() higher-order function for maximum optimization.

Example

npm install million

// vite.config.js
import million from 'million/compiler';
import react from '@vitejs/plugin-react';

export default {
  plugins: [million.vite({ auto: true }), react()]
};

// Automatic optimization - no code changes needed
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} - {user.role}</li>
      ))}
    </ul>
  );
}
// Million.js automatically optimizes this at build time

Related on TokRepo

• AI Tools for Coding — Frontend development tools and frameworks
• Featured Workflows — Discover performance optimization tools and more

Common pitfalls

• Expecting Million.js to optimize components with heavy side effects or non-deterministic rendering patterns.
• Using the block() HOC on components that already use React.memo without understanding how they interact.
• Assuming all components benefit equally. Million.js provides the biggest gains on list rendering and data-grid components.