SolidJS Fine-Grained Reactivity

createSignal: returns [getter, setter]. The getter count() — called as a function — reads the value and registers the current reactive context as a subscriber. The setter setCount(n) updates the value and re-runs all subscribed effects and computations. This function-call API lets SolidJS track dependencies without a compiler transform.

createEffect: uses SolidJS's reactive tracking context. When the effect runs, every signal getter invoked inside is automatically recorded as a dependency. On subsequent runs only the signals accessed in the most recent execution are tracked — so conditional dependencies are handled correctly without listing them manually.

Fine-grained reactivity: In React/Vue, a state change re-renders the component function and diffs a virtual DOM tree. In SolidJS, components run once to set up reactive bindings; thereafter a signal change directly updates the bound DOM node (e.g. a text node or attribute) with no component function re-execution and no virtual DOM comparison.

createMemo: is SolidJS's equivalent of a computed value. const doubled = createMemo(() => count() * 2) — doubled() returns the cached result unless count() has changed. Unlike createEffect, memo values are used as inputs to other computations, enabling a dependency graph that avoids redundant recalculations.

No virtual DOM in SolidJS: At compile time, JSX like <p>{count()}</p> is compiled to document.createElement('p') with a reactive effect that updates p.textContent when count() changes. No intermediate tree is created or diffed. This gives SolidJS benchmark performance comparable to vanilla JS.