Build a Reactivity Engine
Interactive lab

50 min

Dependency Tracking

Wire createEffect so signals automatically re-run effects when dependencies change.

~/playground — 02-dependency-tracking · edit engine.js

Live
export function createSignal(initial) {
  let value = initial
  const subscribers = new Set()

  return {
    get() {
      return value
    },
    set(next) {
      value = next
      subscribers.forEach((fn) => fn())
    },
    subscribe(fn) {
      subscribers.add(fn)
      return () => subscribers.delete(fn)
    },
  }
}

Preview goal: Clicking A+1 or B+1 updates the sum and individual counters in the preview.

Checkpoints

  • Effects re-run only when tracked signals change
  • All Sandpack tests pass