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.

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

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.

const snapshot = App();

// snapshot of component
<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"). If the element is different, it will update it.

• The <div> tag is the same, so it doesn't need to be updated. ✅
  • The <p> tag is the same, so it doesn't needs to be updated. ✅
    • The text inside the <p> tag is different, so it needs to be updated. ⚠ ️
  • The <button> tag is the same, so it doesn't need to be updated. ✅
    • The onClick prop is the same, so it doesn't need to be updated. ✅
    • The text inside the <button> tag is the same, so it doesn't need to be updated. ✅

(total: 6 diff checks)

React will then update the <p> DOM node to reflect the new value.

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