Mesa Counter Playground
Interactive demonstration of fine-grained reactivity. Watch how each component updates independently when only their subscribed data changes.
0 total renders
Current Count
Only re-renders when count changes • Render count: 0
0
Independent from step, stats, and history updates
Controls
Step: 1Only re-renders when step changes • Render count: 0
Keyboard shortcuts:
Space: +1 • ↑: +1 • ↓: -1 • R: Reset
Step Size
Only re-renders when step changes • Render count: 0
Current increment/decrement amount
Component Render Counts
Each component only re-renders when its specific data changes
0
Counter Display
0
Counter Controls
0
Step Selector
Understanding Fine-Grained Reactivity
🎯 What You're Seeing:
- • Each component only re-renders when ITS subscribed data changes
- • Console logs show exactly which components render and when
- • Render counters prove components update independently
⚡ Try This:
- • Increment the counter → Only CounterDisplay re-renders
- • Change step size → Only CounterControls and StepSelector re-render
- • Use keyboard shortcuts → Space: +1, ↑: +step, ↓: -step, R: reset
🔍 In Traditional React:
ALL components would re-render on ANY state change. Mesa prevents this with fine-grained subscriptions.