Before You Reach for a Faster React

Million is an optimising compiler for React. It replaces the virtual-DOM diff for components you mark, and on the right workload the improvement is large and real.

I am writing about it mostly to make a different point: on most sites that feel slow, React rendering is not why.

Measure before you install anything

Open the Performance panel, record an interaction that feels slow, and look at where the time goes. You will usually find one of these:

1. Network. Fonts, images and a large JavaScript bundle. The page is not slow at rendering, it is slow at arriving.
2. A layout thrash. Something reads offsetHeight in a loop after writing styles.
3. Rendering. Long scripting blocks in component render — the case a compiler helps with.

In my experience the split is heavily weighted to the first. A 2 MB hero image costs more than every re-render on the page combined, and no compiler will fix it.

When it genuinely is rendering

The pattern is a list or table with many rows, updating often — live data grids, editors, dashboards with streaming values. There, virtual-DOM diffing per update is the cost, and a compiler that replaces it with targeted DOM operations wins.

Copy codeimport { block } from 'million/react'

const Row = block(function Row({ item }) {
  return <tr><td>{item.name}</td><td>{item.value}</td></tr>
})

Adopt it per component, on the components you measured. Not globally, on faith.

The cheaper fixes, in the order I apply them

1. Images. Correct dimensions, modern format, lazy below the fold, explicit width/height so nothing shifts.
2. Fonts. Self-hosted, subset, font-display: swap, preloaded if it is the LCP text.
3. Bundle. Route-level code splitting; check what the biggest chunk actually contains.
4. The obvious render bug. A context provider whose value is a new object every render, re-rendering the tree. One useMemo, no dependency.
5. Then consider a compiler.

The first four are free, apply to every site, and are where the seconds are. React's own compiler work is also moving in this direction, which makes hand-tuned memoisation less necessary over time.

The rule

Never add a performance tool without a number before and a number after. Otherwise you have added a dependency, a build step and a new class of debugging problem in exchange for a feeling.

Resources

• Repo: aidenybai/million
• Docs: million.dev
• Video walkthroughs: YouTube: million js react performance
• Related: Core Web Vitals on an image-heavy site