DEV Community

Aiden Bai
Aiden Bai

Posted on

4 2

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} />);
});
Enter fullscreen mode Exit fullscreen mode

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:

Open in StackBlitz

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!

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay