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.

Purpose of Flush

Flushes ensure that all reactive updates are processed at once, and that reactivity only occurs for the final value if a value updates multiple times.

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 in the browser which are expensive multiple millisecond operations. Joining them together into one flush ensures these updates all contribute to a single update to the component.

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. This ensures any code after a flush 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.