Million.js

Qué es

Million.js es un compilador optimizador para React, creado por Aiden Bai bajo licencia MIT. Su idea central es sustituir el reconciliador del virtual DOM de React por un “Block Virtual DOM” que compara datos en lugar de elementos del DOM, reduciendo la reconciliación de complejidad O(n) a O(1). Está escrito principalmente en TypeScript y se integra como una pieza más de tu proyecto React, sin obligarte a aprender un framework nuevo.

Para qué sirve

• Acelerar el renderizado de componentes React que muestran muchos datos (hasta un 70% más rápidos según el proyecto).
• Optimizar listas largas, tablas de datos y paneles de control donde la reconciliación de React se vuelve un cuello de botella.
• Aplicar optimizaciones de forma automática vía CLI, sin tocar el código de tus componentes.
• Optimizar de forma puntual y manual los componentes más críticos con la función block().
• Mejorar el rendimiento de aplicaciones React existentes sin migrar a otro framework.

Cuándo usarlo

Encaja cuando ya tienes una aplicación React y notas lentitud al renderizar interfaces con mucha información estructuralmente estable (tablas, listas grandes, dashboards). No sustituye a React Compiler ni a herramientas de diagnóstico como React Scan, sino que las complementa: lo habitual es identificar el cuello de botella, activar React Compiler y, si la lentitud persiste en zonas concretas, añadir Million.js. No es la opción ideal para interfaces muy dinámicas cuya estructura cambia constantemente.

Ejemplo

Instalación y configuración automática del proyecto mediante la CLI:

npx million@latest

La CLI instala el paquete y ajusta la configuración de tu bundler por ti. Para optimizar un componente concreto de forma manual, se envuelve con block():

import { block } from 'million/react';

function MiLista({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.nombre}</li>
      ))}
    </ul>
  );
}

const ListaOptimizada = block(MiLista);

export default ListaOptimizada;

Puntos clave

• Block Virtual DOM: compara los datos en lugar del árbol de elementos del DOM.
• Modo automático vía CLI que optimiza sin cambios en el código.
• Función block() para optimizar componentes críticos de forma manual.
• Compatible con React Compiler: ambos pueden usarse juntos.
• Usado en producción por proyectos como Wyze, MetaMask y Hack Club.

Ten en cuenta

• Aporta poco en interfaces cuya estructura cambia mucho entre renderizados; brilla en UIs estables con muchos datos.
• Con React 19 y React Compiler, parte de las optimizaciones ya las cubre el propio ecosistema; añade Million.js solo si sigue habiendo lentitud.
• La web oficial del proyecto se trasladó a old.million.dev, ya que el dominio million.dev lo ocupa ahora otra empresa del mismo autor; la documentación y la CLI siguen funcionando.