Drag-and-Drop Demo

BosatsuUI (batchSize: 1) vs React 18 (flushSync) - Immediate position updates

BosatsuUI Position Updates
0
React Position Updates
0
BosatsuUI Workspace
batchSize: 1 (immediate)
A
B
C
Drag a box to see position
React 18 Workspace
flushSync for immediate

Why Immediate Updates Matter for Drag-and-Drop

Drag-and-drop requires synchronous position updates because each mouse move event needs to read the previous position from the DOM before calculating the new position.

BosatsuUI advantage: With batchSize: 1 and flushDelay: 0, updates are naturally synchronous. No special API needed.

React workaround: React requires flushSync() to force immediate rendering, which is explicitly discouraged in the React docs as it can cause performance issues.

This demo shows both frameworks handling the same drag interaction. Notice how BosatsuUI's direct binding approach makes position updates trivial, while React requires careful state management.