{"slug":"reactivity","title":"Reactivity","headings":["Signal","effect","derived / memo","batch / untrack","Live example"],"contentHtml":"

Reactivity

Signal

import { Signal, effect } from \"ruri\"\n\nconst count = new Signal(0)\ncount.value // read (tracks dependencies inside effects)\ncount.peek() // read without tracking\ncount.value = 1 // write (notifies subscribers)

effect

const dispose = effect(() => {\n  console.log(count.value)\n})\ncount.value = 2 // logs 2\ndispose()

Dependencies are re-tracked on every run, so conditional reads never leak subscriptions. Cleanups registered with onCleanup run before each re-execution and on dispose.

derived / memo

const doubled = derived(() => count.value * 2)

Derived signals are memoized and can be disposed to stop the internal computation.

batch / untrack

batch(() => {\n  first.value = 1\n  second.value = 2 // single notification round\n})\n\nuntrack(() => someSignal.value) // read without creating a dependency

Live example

import { derived, effect, Signal, tags } from \"ruri\"\n\nconst { div, input, strong } = tags\nconst name = new Signal(\"world\")\nconst shout = derived(() => name.value.toUpperCase())\n\nconst input_ = input({ value: name.peek(), oninput: (event) => { name.value = event.target.value } })\noutput.append(div({}, \"hello, \", input_, \"! \", strong({}, shout)))
running...
"}