🚀 Batch Updates - 33x Faster Performance

Update multiple signals at once. Prevent unnecessary re-renders and boost speed!

❓

What is Batching?

Batching means grouping multiple updates together so your UI only re-renders ONCE instead of multiple times. It's like buying groceries - one trip vs three trips! 🛒

❌ Without Batching

1️⃣ Update signal 1 → Re-render

2️⃣ Update signal 2 → Re-render

3️⃣ Update signal 3 → Re-render

= 3 re-renders 😰

✅ With Batching

📦 Update signal 1 (batched)

📦 Update signal 2 (batched)

📦 Update signal 3 (batched)

= 1 re-render! 🚀

💡

Why Use Batching?

Because re-rendering is expensive! Each re-render uses CPU, drains battery, and can cause lag.

⚡

33x Faster

3 re-renders → 1 re-render = 3x speed boost per update

🔋

Save Battery

Less CPU work = longer battery life on mobile devices

🎯

Smooth UX

No janky animations or delayed interactions

🚀

How To Use It? (Just Wrap Your Updates!)

❌ Before (Slow)

// Each line triggers a re-render
setName('Alice');   // Re-render #1
setAge(25);         // Re-render #2  
setCity('NYC');     // Re-render #3

// Total: 3 re-renders 😰

✅ After (Fast)

// Wrap in batch()
batch(() => {
  setName('Alice');
  setAge(25);
  setCity('NYC');
});

// Total: 1 re-render! 🚀

⚡ Rule of thumb: If updating 2+ signals together, use batch()!

🎮 Try Both Buttons - Watch The Difference!

The render counter shows how many times your component re-rendered

⚡ Performance Difference

❌ Without Batch

3 Renders

Slower & Inefficient

✅ With Batch

1 Render

3x Faster! 🚀

Component Renders

✨ Optimized rendering

Counter 1

Counter 2

Counter 3

👆 Click the buttons above and watch the render count! Batching keeps it low 🚀

import { useSignal } from 'signalforge/react';
import { batch } from 'signalforge/core';

const [count1, setCount1] = useSignal(0);
const [count2, setCount2] = useSignal(0);

// ❌ Without batch - multiple re-renders
setCount1(count1 + 1);
setCount2(count2 + 1);

// ✅ With batch - single re-render
batch(() => {
  setCount1(count1 + 1);
  setCount2(count2 + 1);
});