State and Derived Values
Read and write state through explicit getter/setter pairs, and derive values instead of synchronizing copies.
Example
import { derive, state } from '@askrjs/askr';
export function OrderTotal() {
const [quantity, setQuantity] = state(2);
const [unitPrice] = state(12);
const total = derive(() => quantity() * unitPrice());
return <button onClick={() => setQuantity((value) => value + 1)}>Total: {total()}</button>;
}Create state
Call `state(initialValue)` inside a component and destructure the result as `const [count, setCount] = state(0)`. Read with `count()` and write with `setCount(...)`. Under the hood each call records itself against the current component instance, so calling `state()` outside of render — at module scope or inside an event handler — throws instead of silently creating orphaned state.
Read and update state
Read a state cell by calling it, `count()`, and update it by calling `setCount(nextValue)` or `setCount(prev => prev + 1)` when the next value depends on the previous one. Reading state inside a component body is what wires that component up to future updates; reading it outside render (in a plain callback, for instance) just returns a snapshot without subscribing to anything.
Derived values
`derive(fn)` computes a value from other reactive sources and re-evaluates only when one of those sources changes, returning a `Derived<T>` that's callable just like state. It also supports a two-argument form, `derive(source, map)`, for mapping over another readable source such as a resource or query result. Because derived values are read the same way as state, you can swap one for the other without touching the calling code.
Selectors and subscriptions
`selector(source, equals?)` builds a fine-grained subscription: it watches `source()` and returns a predicate you call with a candidate value to check equality, so a component only re-renders when that specific comparison flips rather than whenever the underlying source changes at all. The optional `equals` function lets you customize comparison beyond `===`, which matters for objects or normalized IDs. This is the tool for list items or tabs that need to know "am I the selected one" without subscribing to the whole selection value.