Reactive Proxy Signals

"Change the data, the UI updates" — Vue, Solid, and Svelte all deliver that without a virtual DOM by making state reactive. The core is small and clever: wrap an object in a Proxy, record which running effect reads which property (track), and when a property is written, re-run exactly those effects (trigger). No dependency arrays, no manual subscriptions — reading a value is subscribing to it. Building this core is the best way to demystify modern reactivity.

Implement reactiveProxySignals() returning { reactive, effect, computed }. See Vue Reactivity in Depth.

Signature

function reactiveProxySignals() {
  return { reactive, effect, computed };
}

Examples

const { reactive, effect, computed } = reactiveProxySignals();
const state = reactive({ price: 10, qty: 2 });

effect(() => console.log('total', state.price * state.qty)); // logs 'total 20'
state.qty = 3;                                                // re-runs -> 'total 30'

const total = computed(() => state.price * state.qty);
total.value; // 30, cached until price/qty change

Notes

• Reading tracks, writing triggers — inside a running effect, a property read records the dependency; a write to that property re-runs every effect that read it.
• Dynamic dependencies — before each re-run, clear an effect's old deps so a branch it no longer reads stops triggering it.
• computed is lazy + cached — its getter runs on first .value access, caches, and only recomputes after one of its own dependencies changes; effects reading .value react to it.
• Details — setting an equal value shouldn't trigger; nested objects are reactive; effect returns a stop(); an effect writing a prop it reads must not loop forever.