I made React with a faster Virtual DOM

Plug: I help develop Million: Virtual DOM into the future! 💥🦁✨

Million is a lightweight (<1kb) Virtual DOM. It's really fast and makes it easy to create user interfaces.

Oh man... Another /virtual dom|javascript/gim library? I'm fine with React already, why should I bother switching?

Million makes creating user interfaces as easy as React, but with faster performance and smaller bundle size for the end user. By computing the user interface beforehand with a compiler, Million reduces the overhead of traditional Virtual DOM.

Okay cool... but why should I use Million if I can just use Preact if I need something a bit more lightweight?

While alternative libraries like Preact reduce bundle sizes by efficient code design, Million takes it a step further by leveraging compilation to make a quantum leap in improving bundle size and render speed.

Think of it as if Preact and Svelte had a baby. A baby with super speed! 👶

Using million/react

Here is an extremely simple implementation of a Counter app using Million.

import { compat, createRoot, useState } from 'million/react';

function Counter({ init }) {
  const [value, setValue] = useState(init);

  return (
    <div>
      <div>Counter: {value}</div>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <button onClick={() => setValue(value - 1)}>Decrement</button>
    </div>
  );
}

const root = createRoot(document.querySelector('#app'));

// Million wraps render functions inside a compat function
compat(() => {
  root.render(<Counter init={0} />);
});

Here, you can write React code. Million will automagically optimize it during compile time, allowing for a super speedy Virtual DOM.

Open the project to start tinkering:

Need help on using React? Check out the React documentation.

This is very, VERY early stage, so be prepared for weird bugs / plugin incompatibility / etc. If you have any suggestions, I'd be more than happy if you replied in a comment with it!