Building a Real-Time Dashboard with Olum Signals

Fine-grained reactivity shines brightest when data changes frequently. In this tutorial we'll build a live trading dashboard that renders hundreds of price updates per second — and stays buttery smooth doing it.

The problem with coarse-grained updates

Most frameworks re-render an entire component tree when any piece of state changes. For a dashboard with 200 tickers updating 10 times a second, that's 2,000 full re-renders per second. Even with a virtual DOM, the diffing cost adds up.

Olum signals update only the exact DOM nodes that depend on a changed value. A price update touches one <span> — nothing else runs.

Setting up the signal store

import { signal, computed } from 'olum'

export interface Ticker {
  symbol: string
  price: signal<number>
  change: computed<number>
  changePercent: computed<number>
}

export function createTicker(symbol: string, initial: number): Ticker {
  const price = signal(initial)
  const open = initial
  const change = computed(() => price.value - open)
  const changePercent = computed(() => (change.value / open) * 100)
  return { symbol, price, change, changePercent }
}

Rendering without re-renders

Because each cell binds directly to a signal, Olum patches only the changed text node when a price updates. The surrounding component — headers, layout, other rows — never runs again.

Benchmarks

• 200 tickers × 10 updates/s = 2,000 DOM patches/s
• CPU usage: ~1.2% on an M4 MacBook Pro
• Memory stable at 28MB after 10 minutes
• Comparison: equivalent React app at ~18% CPU