Syntax: const [list, delta] = useList(initialListValue)
Example: const [list, delta] = useList([1, 2, 3])

The useList() hook is an optimized version of the useState() hook, but exclusively for arrays. Instead of returning state and setState, it returns list and delta. list is a mutable value that you can update like a variable, and delta is a payload that you can pass into virtual nodes.

import { createRoot, useList } from 'million/react';
function App() {
  const [list, delta] = useList([]);
  return (
        onClick={() => {
          list.push(list.length + 1);
      <ul delta={delta}>
        { => (
createRoot(document.body).render(<App />);

useList leverages a highly reactive data structure and exports Delta to update the Virtual DOM. This makes it possible to update the DOM without having to go through traditional Virtual DOM diffing.

Below is a comparison chart of the insane performance useList (through Delta) has, making it as fast as Solid.js and Svelte!

Comparison chart of useList performance

React uses the Virtual DOM, and it can get REALLY slow when there's a lot of children, even with keyed nodes. The reason why is React isn't actually aware of the state during rendering, leading to a lot of unnecessary work.

TL;DR: The bottleneck is diffing.

How React diffing works

Million now supports a new Delta rendering, which is a new reactive primitive! It uses a Proxy to capture changes to the state and calculate the necessary DOM manipulations.

This way, we bypass diffing altogether, removing the bottleneck:

Diff bypass example

More on the twitter thread...