BosatsuUI vs React Performance Benchmark

Comparing direct DOM binding updates vs Virtual DOM diffing

Fair Benchmark: This benchmark uses actual React 18 (ReactDOM.createRoot, useState) - not a simulation. Both frameworks perform real DOM updates. Run multiple times for consistent results.

BosatsuUI Batching Configuration

Infinity

Tip: Set batch size to "Infinity" and flush delay to "microtask" for fair comparison with React's automatic batching. Use batch size "1" with "0 (synchronous)" for immediate updates (like drag-and-drop scenarios).

How BosatsuUI Works (No Virtual DOM!)

BosatsuUI uses compile-time static analysis to extract statePath -> DOMProperty bindings. When state changes:

  1. Look up bindings for the changed state path (O(1) map lookup)
  2. Apply element.property = value directly (O(1) per binding)
  3. No virtual DOM creation, no tree diffing, no reconciliation

React approach: Create new virtual DOM tree -> Diff against old tree -> Generate patches -> Apply patches. This is O(n) where n is component tree size.

With batching: BosatsuUI collects updates in a Map (last-write-wins monoid), then applies them all at once. This gives React 18-style automatic batching while skipping VDOM diffing entirely.

Benchmark Controls

Results

Click a button above to run benchmarks