Reactive Flushing

Changes to Signals do not cause dependent Reactions to run immediately. Instead, updates are queued and “flushed” together asynchronously. This batching process uses the browser’s microtask queue.

Asynchronous Updates

When you update a value using value or .set(), dependencies are not immediately rerun but instead are marked to rerun during the next flush cycle.

The flush cycle is an asynchronous process that is added to the microtask queue when a dependency is updated.

Reactive Flushes

Flushes ensure that all reactive updates are processed at the same time with their current values.

For example you might have several reactive values that all update the same UI component. If each update occurred independently they could each trigger their own repaint reflow or style calculation which can be expensive operations in the browser. Joining them together into one flush ensures these updates all contribute to a single update to the component.

Flushes use queueMicrotask to have a flush occur on the next tick after all javascript is executed.

Synchronous Updates

If you need your updates to propagate immediately you can use Reaction.flush().

This processes all pending reactions, and runs a flush cycle immediately ensuring any code after will occur after all dependencies have been rerun.

After Flush Callback

To schedule a function to run after the next asynchronous flush completes, pass a callback to Reaction.afterFlush().

This is often used when reactive updates might cause changes in the DOM. If you naively query for them immediately after the update, the results will not have propagated.