⚡ Live Performance Benchmark

Watch SignalForge vs traditional state management in real-time. See the render count difference yourself!

🎯 What You're About To See

✅ SignalForge (Green)

When one counter updates, only that counter re-renders. The other 9 counters stay frozen. This is fine-grained reactivity.

1 update = 1 re-render

⚠️ Traditional State (Orange)

When one counter updates, all 10 counters re-render because they share the same state object. This is the React/Context/Redux default.

1 update = 10 re-renders (10x waste!)

⚙️ Benchmark Controls

Click start and watch the render counters below each number

Update Speed: 100ms (faster = more impressive difference)

Total Updates

Changes to state

SignalForge Renders

Component re-renders

Traditional Renders

Component re-renders

Efficiency Gain

Fewer re-renders

✅ SignalForge (Fine-Grained)

Renders: 0

👀 Watch the "Renders" count - only the changed counter increments!

⚠️ Traditional State (Coarse-Grained)

Renders: 0

👀 ALL counters show the same render count - they all re-render together!

🧪 Why This Matters

📱 Mobile Performance

With 100 items on screen, traditional state causes 100 re-renders per update. On slower mobile devices, this causes visible lag. SignalForge? Still just 1 re-render.

⚡ Battery Life

Fewer re-renders = less CPU usage = longer battery life. In this demo with 100 updates, traditional state does 1,000 re-renders. SignalForge does 100. That's 10x less work.

🎮 Real-Time Apps

Games, collaborative editors, live dashboards - any app with frequent updates will be noticeably smoother with SignalForge. Users won't see jank or frame drops.

📊 Performance at Scale

Scenario	Items	SignalForge	Traditional	Difference
Simple counter list	10	1 render	10 renders	10x slower
Product grid	100	1 render	100 renders	100x slower
Dashboard widgets	50	1 render	50 renders	50x slower
Chat messages	1000	1 render	1000 renders	1000x slower
Large spreadsheet	10,000	1 render ⚡	10,000 renders 🔥	UNUSABLE

🔬 Technical Implementation

SignalForge

// Each counter is independent signal
const counters = Array.from({ length: 10 }, 
  () => createSignal(0)
);

// Component subscribes to ONE signal
function Counter({ index }) {
  const value = useSignalValue(
    counters[index]
  );
  // Only re-renders when THIS counter changes
  return <div>{value}</div>;
}

// Update one counter
counters[5].set(counters[5].get() + 1);
// Result: Only Counter(index=5) re-renders ✅

Traditional State

// All counters in one state
const [counters, setCounters] = useState(
  Array(10).fill(0)
);

// Component reads from shared state
function Counter({ index }) {
  // Subscribes to ENTIRE array
  return <div>{counters[index]}</div>;
}

// Update one counter
setCounters(prev => {
  const next = [...prev];
  next[5] += 1;
  return next;
});
// Result: ALL 10 Counters re-render ❌