On This Page
Deriving
Selecting
Teardown
Compute new signals from existing ones, and select per-key membership against a source. Each derivation tracks its inputs and recomputes when they change.
Deriving
derive
derive(source, computeFn, options);Creates a new signal derived from a single source signal, recomputing when the source changes. Also available as the instance method source.derive.
Parameters
| Name | Type | Description |
|---|---|---|
| source | Signal | The source signal |
| computeFn | function | Receives the source value, returns the derived value |
| options | object | Optional configuration, same shape as signal() |
Returns
A new Signal holding the derived value, carrying a .stop() method.
Usage
import { signal, derive } from '@semantic-ui/reactivity';
const celsius = signal(20);const fahrenheit = derive(celsius, c => c * 9 / 5 + 32);
celsius.set(30);fahrenheit.peek(); // 86Example
source.derive
signal.derive(computeFn, options);Instance-method form. Sugar for derive with this signal as the source.
const count = signal(1);const doubled = count.derive(n => n * 2);computed
computed(computeFn, options);Creates a new signal computed from many signals. The compute function re-runs whenever any signal it reads changes. Use this when the result depends on more than one source.
Parameters
| Name | Type | Description |
|---|---|---|
| computeFn | function | Reads any number of signals, returns the computed value |
| options | object | Optional configuration, same shape as signal() |
Returns
A new Signal holding the computed value, carrying a .stop() method.
Usage
import { signal, computed } from '@semantic-ui/reactivity';
const first = signal('Ada');const last = signal('Lovelace');const fullName = computed(() => `${first.get()} ${last.get()}`);
last.set('Byron');fullName.peek(); // 'Ada Byron'Reach for derive when the value comes from one source, computed when it draws on several. derive passes the source value in for you, computed reads its own signals in the body.
Reach for derive when the value comes from one source, computed when it draws on several. derive passes the source value in for you, computed reads its own signals in the body.
Example
Selecting
match
match(source, matchFn);Creates a per-key reactive selector against a source signal. The returned matcher reports whether matchFn(key, sourceValue) holds for a given key. A source change re-fires only the keys whose result flipped, so N readers cost O(flipped) not O(N). This is the “highlight one of N” pattern.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| source | Signal | The source signal to match against | |
| matchFn | function | (key, value) => key === value | Predicate comparing a key to the source value |
Returns
A reactive matcher function (key) => boolean, carrying a .stop() method. Calling it inside a reaction subscribes only that key.
Usage
import { signal, match } from '@semantic-ui/reactivity';
const selected = signal('inbox');const isSelected = match(selected);
// reads only re-fire for the keys that flipisSelected('inbox'); // trueisSelected('archive'); // false
selected.set('archive'); // re-fires 'inbox' and 'archive', not the restmatch re-fires on a strict reference change of the source value, not its equality function. With safety: 'reference' mutate then notify() does not produce a new reference, so swap in a fresh value when matchers should re-evaluate.
match re-fires on a strict reference change of the source value, not its equality function. With safety: 'reference' mutate then notify() does not produce a new reference, so swap in a fresh value when matchers should re-evaluate.
Example
Teardown
stop
derived.stop();Every derivation carries a stop() method that tears down its backing reaction. After stop(), source changes no longer recompute the signal or re-fire matchers.
A derivation created inside a reaction is stopped automatically when that reaction is cleaned up, and an unreferenced derivation self-stops once it is garbage collected. Call stop() directly when an owner-less derivation needs deterministic teardown.
Usage
const total = computed(() => first.get() + second.get());
// later, when the owner no longer needs ittotal.stop();