Two builds, one behaviour

The same dashboard, written twice from one spec: once with React, once with no framework at all. Pick a scenario and both run it at the same moment, here in your browser.

Do they behave the same?

Waiting for both builds to start.

A step is anything a person could notice: a request, a state change, a loading phase, an announcement or a focus move. Timing is left out; order and content must match.

React

React 19, hooks and a reducer

Ready in: Measuring…
JavaScript downloaded: Measuring…
Steps this run: 0

Last announcement: none yet

Keyboard and screen reader are on this build.

Framework-free TypeScript

No framework, no runtime dependencies

Ready in: Measuring…
JavaScript downloaded: Measuring…
Steps this run: 0

Last announcement: none yet

Keyboard and screen reader are on this build.

Measured in your browser for this visit, with both builds loading at the same time. Numbers change with device, network and cache; reload to measure again.

At build time

Source size and dependencies of each build, counted when this page was built.
Measure	React	Framework-free TypeScript
Source lines (non-blank)	1,063	1,061
Source files	14	8
Runtime dependencies	`react, react-dom`	None

Where each build was harder to write

What one build gets for free and the other had to do by hand.
Topic	React	Framework-free TypeScript
Keeping sort order and view toggles	Free: component state survives a data update.	A small memory object keeps them while the body is rebuilt.
Keeping keyboard focus	Free: a re-rendered button is the same element.	Rebuildable controls carry a key; focus is restored to the matching one.
Arming the loading timers on time	Needs useLayoutEffect, or the 300 ms timer starts a frame late.	Armed directly in the same task as the render.
Download size	The React runtime is most of the bundle.	Only the dashboard itself is shipped.