👥 Real-Time Collaboration - Only Update What Changes!

Like Google Sheets where multiple people edit at once - but SUPER fast! Watch how only the cells that change get updated.

❓

What Is This Demo Showing?

Imagine a shared spreadsheet (like Google Sheets) where 3 people are editing at the same time. Each cell in the grid is independent - when Alice edits cell A1, only A1 updates. Bob and Charlie's cells stay frozen!

🔍 Look at the "R:" number in the top-left of each cell. That's how many times that cell re-rendered.

👉 Try this: Click "▶️ Start Simulation" and watch - only the cells being edited increase their "R:" count!

💡

Why Is This Important?

In real apps (like spreadsheets, collaborative docs, or dashboards), you might have hundreds or thousands of cells. If every cell re-renders when ONE changes, your app becomes laggy and slow! 😰

😰 Without SignalForge (Old Way)

✏️ User types in 1 cell

⚠️ ALL 25 cells re-render!

It's like repainting your entire house just to fix one scratch! 🏠

With 100 cells: That's 100 updates for every keystroke! 💀

✅ With SignalForge (Smart Way)

✏️ User types in 1 cell

🎯 Only THAT cell re-renders!

Like fixing just the scratch - leave everything else alone! ✨

With 1000 cells: Still just 1 update! Blazing fast! 🚀

🔧

How Does It Work? (Super Simple!)

Each cell = Its own signal

// Create 25 independent signals (5x5 grid)
const cellSignals = Array.from({ length: 5 }, (_, row) =>
  Array.from({ length: 5 }, (_, col) => 
    createSignal({ value: '' }) // Each cell is separate!
  )
);

Think: 25 separate light switches, not 1 master switch! 💡

Each cell watches ONLY its signal

function Cell({ row, col }) {
  const cell = useSignalValue(cellSignals[row][col]);
  // This cell ONLY updates when cellSignals[row][col] changes!
  return <div>{cell.value}</div>;
}

Each cell minds its own business! 🎯

Update = Only affected cell re-renders

// When user edits cell [2,3]:
cellSignals[2][3].set({ value: '42' });
// ✅ Only cell [2,3] re-renders
// ✅ Other 24 cells? Frozen, no re-render!

Surgical precision! Change only what's needed! ✂️

🎮 Try It Yourself!

📊 Total Edits So Far: 0

👀 Watch the "R:" number in the top-left corner of each cell below. It shows how many times that cell re-rendered. Only edited cells will increase!

👥 Simulated Users (Watch for their colors when editing!):

Alice

Bob

Charlie

📊 Collaborative Spreadsheet (5×5 Grid)

Each cell is independent. Watch the "R:" counter to see which cells actually re-render!

R:0

🔬 How It Works

1️⃣ Each Cell = Independent Signal

// 5x5 grid = 25 independent signals
const cellSignals = Array.from({ length: 5 }, (_, row) =>
  Array.from({ length: 5 }, (_, col) => 
    createSignal({ id: `${row}-${col}`, value: '' })
  )
);

// Each cell component subscribes to ONE signal
function ReactiveCell({ row, col }) {
  const cell = useSignalValue(cellSignals[row][col]);
  // Only re-renders when THIS cell's signal changes!
  return <div>{cell.value}</div>;
}

2️⃣ Fine-Grained Updates

When user edits cell [2,3]:

• SignalForge updates cellSignals[2][3]
• Only ReactiveCell(row=2, col=3) re-renders
• Other 24 cells remain untouched

❌ Context API Equivalent

// All cells in ONE big state object
const [cells, setCells] = useState(/* 25 cells */);

function ReactiveCell({ row, col }) {
  // Subscribes to ENTIRE cells array
  const cells = useContext(CellsContext);
  const cell = cells[row][col];
  
  // Re-renders whenever ANY cell changes! 😱
  return <div>{cell.value}</div>;
}

// Edit one cell → ALL 25 cells re-render
setCells(prev => /* update cells[2][3] */);

🌍 Real-World Applications

📊

Live Dashboards

100+ metrics updating independently. Only changed widgets re-render.

💬

Chat Applications

1000+ messages. Only new messages render. Scroll stays smooth.

🎮

Games & Simulations

Each game entity is a signal. 60 FPS even with 1000+ objects.

📈 Why This Matters

25x

Fewer re-renders in this demo

100x

With 100-cell grids

1000x

With 1000-cell grids

∞

Scale without slowdown