On This Page
Flushing
After Flush
Settling
Control when pending reactions run. By default a signal change schedules its dependents onto the microtask queue, these free functions let you flush that queue now, run a callback once it settles, wait for asynchronous runs to finish, or schedule it yourself.
import { flush, afterFlush, scheduleFlush, settled } from '@semantic-ui/reactivity';Reactions run on the microtask queue, so a write does not re-run dependents synchronously. Batched writes within the same tick collapse to a single flush, and dependents observe only the final value. Use flush() to force them through now.
Reactions run on the microtask queue, so a write does not re-run dependents synchronously. Batched writes within the same tick collapse to a single flush, and dependents observe only the final value. Use flush() to force them through now.
Flushing
flush
flush();Synchronously drains every pending reaction instead of waiting for the microtask. Batched writes resolve to their final value, errors are captured and rethrown after the queue drains so one faulty reaction cannot jam the rest, and a reactive cycle is broken after a fixed iteration cap. In-flight async reactions are not awaited, use settled() to wait for full quiescence.
Usage
const count = signal(0);reaction(() => console.log(count.get()));
count.set(1);count.set(2);flush(); // logs 2 once, not 1 then 2Example
scheduleFlush
scheduleFlush();Schedules pending reactions to run on the next microtask. This is the default behavior when a signal changes and is idempotent within a tick, so calling it repeatedly before the queue drains is a no-op. You rarely call this directly, reach for it only when wiring custom timing around the queue.
Example
After Flush
afterFlush
afterFlush(callback);Registers a callback to run once the next flush drains. Use it for side effects that should happen after all reactions have settled, such as reading layout once the DOM has caught up. Callbacks registered during a flush run in a later pass of the same flush, after the reactions they queued.
Parameters
| Name | Type | Description |
|---|---|---|
| callback | function | Runs after the queue drains |
Usage
afterFlush(() => { // all reactions have run, DOM is up to date console.log('settled');});Example
Settling
settled
await settled();Returns a promise that resolves once the reactive system is fully quiet, after every pending reaction, in-flight async run, and afterFlush callback has completed, including any cascades they schedule. Resolves immediately when nothing is pending.
flush() drains the sync queue and returns, but it does not wait for in-flight async reactions. settled() is the async counterpart that waits for those runs and the work they schedule.
Returns
A promise that resolves when the system is idle.
Usage
const userId = signal(1);const user = signal(null);
reaction(async () => { user.set(await fetchUser(userId.get()));});
userId.set(2);await settled(); // resolves after the async re-run and its cascades finish