On This Page
Flushing
After Flush
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, or schedule it yourself.
import { flush, afterFlush, scheduleFlush } 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.
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');});