Reactivity Guide

Creating Signals

import { signal } from 'nexa-framework'

const count = signal(0)
const name = signal('Nexa')

Read and write values using the .value property:

count.value       // → 0
count.value = 5   // triggers updates

Derived State with computed

import { computed } from 'nexa-framework'

const doubled = computed(() => count.value * 2)
const message = computed(() => `Count is ${count.value}`)

Computed values are lazy — they only recalculate when read.

Side Effects with effect

import { effect } from 'nexa-framework'

const dispose = effect(() => {
  console.log(`Count changed to ${count.value}`)
})

// Clean up when done
dispose()

Batching Updates

import { batch } from 'nexa-framework'

batch(() => {
  count.value = 10
  name.value = 'updated'
  // effects run once after the batch
})

Reading Without Tracking

import { untracked } from 'nexa-framework'

effect(() => {
  console.log(count.value)           // tracks count
  console.log(untracked(() => name.value)) // reads name without tracking
})

Common Patterns

Toggle

const visible = signal(true)
const toggle = () => visible.value = !visible.value

Form Input

const text = signal('')
const handleInput = (e) => text.value = e.target.value