million README

The project's README from github.com/aidenybai/million. As one markdown file: README.md.

Want to automatically find and fix performance issues? Check out Million Lint.

Million.js Banner
CI NPM Version NPM Downloads
📚 Read the docs 🎦 Watch video 💬 Join our Discord 🌐 Follow on Twitter

What is Million.js?

Million.js is an extremely fast and lightweight optimizing compiler that make components up to 70% faster.

Oh man... Another /virtual dom|javascript/gi framework? I'm fine with React already, why do I need this?

Million.js works with React and makes reconciliation faster. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of diffing (try it out here)

TL;DR: Imagine React components running at the speed of raw JavaScript.

👉 Setup Million.js in seconds! →

Installation

The Million.js CLI will automatically install the package and configure your project for you.

npx million@latest

Once your down, just run your project and information should show up in your command line!

Having issues installing? → View the installation guide

Why Million.js?

To understand why to use Million.js, we need to understand how React updates interfaces. When an application's state or props change, React undergoes an update in two parts: rendering and reconciliation.

To show this, let's say this is our App:

function App() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In this App, when I click on the button, the count state will update and the <p> tag will update to reflect the new value. Let's break this down.

Rendering

The first step is rendering. Rendering is the process of generating a snapshot of the current component. You can imagine it as simply "calling" the App function and storing the output in a variable. This is what the App snapshot would look like:

const snapshot = App();

// snapshot =
<div>
  <p>Count: 1</p>
  <button onClick={increment}>Increment</button>
</div>;

Reconciliation

In order to update the interface to reflect the new state, React needs to compare the previous snapshot to the new snapshot (called "diffing"). React's reconciler will go to each element in the previous snapshot and compare it to the new snapshot. If the element is the same, it will skip it. If the element is different, it will update it.

(total: 6 diff checks)

<div>
-  <p>Count: 0</p>
+  <p>Count: 1</p>
  <button onClick={increment}>Increment</button>
</div>

From here, we can see that the <p> tag needs to be updated. React will then update the <p> DOM node to reflect the new value.

<p>.innerHTML = `Count: ${count}`;

How Million.js makes this faster

React is slow.

The issue with React's reconciliation it becomes exponentially slower the more JSX elements you have. With this simple App, it only needs to diff a few elements. In a real world React app, you can easily have hundreds of elements, slowing down interface updates.

Million.js solves this by skipping the diffing step entirely and directly updating the DOM node.

Here is a conceptual example of how Million.js reconciler works:

function App() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  // generated by compiler
  if (count !== prevCount) {
    <p>.innerHTML = `Count: ${count}`;
  }

  <button>.onclick = increment;

  // ...
}

Notice how when the count is updated, Million.js will directly update the DOM node. Million.js turns React reconciliation from O(n) (linear time) to O(1) (constant time).

How fast is it? → View the benchmarks

Resources & Contributing Back

Looking for the docs? Check the documentation or the Contributing Guide out. We also recommend reading Virtual DOM: Back in Block to learn more about Million.js's internals.

Want to talk to the community? Hop in our Discord and share your ideas and what you've build with Million.js.

Find a bug? Head over to our issue tracker and we'll do our best to help. We love pull requests, too!

We expect all Million.js contributors to abide by the terms of our Code of Conduct.

→ Start contributing on GitHub

Alt

Codebase

This repo is a "mono-repo" with modules. Million.js ships as one NPM package, but has first class modules for more complex, but important extensions. Each module has its own folder in the /packages directory.

You can also track our progress through our Roadmap.

Module Description
million The main Virtual DOM with all of Million.js's core.
react / react-server React compatibility for Million.js.
compiler The compiler for Million.js in React.
jsx-runtime A simple JSX runtime for Million.js core.
types Shared types between packages

Sponsors

Acknowledgments

Million.js takes heavy inspiration from the following projects:

License

Million.js is MIT-licensed open-source software by Aiden Bai and contributors:

million (aidenybai/million)

Searching Database…

17.7K ·GitHub
Million
What is this?Million.js is an extremely fast and lightweight optimizing compiler for React that makes components up to 70% faster by speeding up reconciliation.
Is this a React replacement or something I add to my existing app?Not a replacement — it works alongside React as an optimizing compiler. It ships as one NPM package and speeds up how your existing components update.
How do I add it to my project?Run the Million.js CLI: it automatically installs the package and configures your project. After that, just run your project as usual.
Do I need a special React setup or bundler config to use it?You just need a working React project — the CLI handles installation and configuration, and optimization info shows up in your command line when you run the app.
Will every React app get faster, or only some?The gains show up in real apps with many JSX elements. Simple apps that only diff a few elements benefit little, since React only slows down as the element count grows.
Why is React slow in the first place, and what does Million do about it?React's reconciler compares every element between the previous and new snapshot (diffing), so updates get slower as the element count grows. Million.js skips the diffing step entirely and updates DOM nodes directly, turning reconciliation from O(n) to O(1).
How much faster will my components actually get?The README claims components up to 70% faster, and the constant-time reconciler means the benefit holds as apps grow. There are benchmarks linked if you want the exact numbers.
What is Million Lint?A separate tool mentioned at the top of the README that automatically finds and fixes React performance issues. Million.js itself is the optimizing compiler that makes reconciliation faster.
Where does the technology come from?The repo is a monorepo whose core virtual DOM takes heavy inspiration from blockdom (pioneering 'blocks' in the virtual DOM) and voby (the template() API), with acknowledgments to ivi and Preact.
What are similar projects?preact, inferno, marked, react-three-fiber, mitosis, react-scan, oxc, hooks
Which topics is it in?optimize, renderer, preact, react-hooks, jsx, optimization, rendering, best-practices, compiler, monorepo, javascript-library, benchmark
Creator
aidenybai
Size
80.7 MB
Stars
17.7K
Updated
CommitMay 20Releasev3.1.0May 21
Age
5y
Commits · 90 Days