On This Page
Creating
Running
Lifecycle
Properties
A reaction is a computation that re-runs whenever the signals it read change. Use it for side effects and computations that respond to reactive state.
Creating
reaction
reaction(callback, options);Creates a reaction and runs it once immediately, tracking the signals the callback reads. It re-runs whenever any of them change. The callback receives the Reaction instance.
Parameters
| Name | Type | Description |
|---|---|---|
| callback | function | Runs reactively, receiving the reaction instance |
| options | object | Optional configuration |
Options
| Name | Type | Default | Description |
|---|---|---|---|
| firstRun | boolean | true | Run the callback immediately on creation. Set false to create the reaction without an initial run |
| context | object | undefined | Debugging context surfaced in tracing output. See Debugging Reactivity |
Returns
The created Reaction.
Usage
import { signal, reaction } from '@semantic-ui/reactivity';
const count = signal(0);
const counter = reaction(() => { console.log('count is', count.get());});
count.set(1); // logs: count is 1Pass firstRun: false to defer the initial run until you call run() yourself.
const deferred = reaction(() => { console.log(count.get());}, { firstRun: false });
deferred.run(); // tracks dependencies and logs for the first timeExample
Running
run
reaction.run();Executes the callback, rebuilding the tracked dependency set from scratch. Called automatically on creation and whenever a dependency changes. Call it manually to force a re-run or to perform the first run of a reaction created with firstRun: false.
Lifecycle
onCleanup
reaction.onCleanup(callback);Registers a cleanup callback that fires just before the reaction’s next run and once when it stops. Use it to tear down resources or scope inner reactions to this one.
Parameters
| Name | Type | Description |
|---|---|---|
| callback | function | Runs on the next re-run or on stop |
Cleanups fire in registration order, and the queue is cleared after firing. A cleanup registered during firstRun fires once, before the second run.
Cleanups fire in registration order, and the queue is cleared after firing. A cleanup registered during firstRun fires once, before the second run.
Usage
const channel = signal('updates');
reaction((self) => { const socket = subscribe(channel.get()); // tears down the old socket before resubscribing, and on stop self.onCleanup(() => socket.close());});stop
reaction.stop();Permanently stops the reaction. It unsubscribes from every dependency, fires its cleanups, and no longer responds to changes. Idempotent.
Usage
const count = signal(0);
const counter = reaction((self) => { console.log(count.get()); if (count.get() > 5) { self.stop(); // detach once the threshold is crossed }});
count.set(6); // logs 6, then stopscount.set(7); // no outputExample
Properties
firstRun
reaction.firstRun;true while the callback is executing for the first time, false on every later run. Useful for one-time initialization.
Read the signals you depend on before any early if (firstRun) return. Bail out first and the reaction registers no dependencies and never re-runs.
Read the signals you depend on before any early if (firstRun) return. Bail out first and the reaction registers no dependencies and never re-runs.
Usage
const data = signal({ value: 0 });
reaction((self) => { const current = data.get(); // track before branching if (self.firstRun) { console.log('initial setup'); } else { console.log('value updated:', current.value); }});Example
active
reaction.active;true while the reaction is responding to changes, false once stop() has been called.
Usage
const counter = reaction((self) => { console.log('active:', self.active);});
counter.stop();counter.active; // falsecurrent
Reaction.current;The reaction currently executing, or null outside a reactive run. A static mirror of Scheduler.current, kept on the class so a debugger breakpoint can read it without importing currentReaction().
Returns
A Reaction or null.