REFERENCE / CORE API

tick()

Returns a promise that resolves after the pending effects — the DOM bindings among them — have run. The asynchronous twin of flushSync().

Signature

tick(): Promise<void>

Returns

A promise. Awaiting it is the same as letting the microtask flush happen; it never forces work early.

In async code

Write, await tick(), and the next line can rely on the DOM reflecting the write.

async function save() {
  status.value = 'saving…';
  await tick();                 // the DOM shows "saving…" from here on
  await api.save(form.value);
  status.value = 'saved';
}

In tests

The usual shape of a DOM assertion: act, await the flush, read.

count.value = 3;
await tick();
expect(button.textContent).toBe('clicked 3 times');

Try it

src/islands/scheduling.ts

import { signal, flushSync, tick, html, mount } from '@amojs.dev/core';

const n = signal(0);
const report = signal('click a button');
let span: HTMLElement;

const withFlushSync = () => {
  n.value++;
  const before = span.textContent; // the value changed, the DOM has not — effects wait for a microtask
  flushSync(); // run every pending effect now
  report.value = `before flushSync the DOM showed ${before}, after it shows ${span.textContent}`;
};

const withTick = async () => {
  n.value++;
  const before = span.textContent;
  await tick(); // resolves once the pending effects have run
  report.value = `before tick the DOM showed ${before}, after it shows ${span.textContent}`;
};

const Demo = () => html`<div class="demo">
  <p>n = <b ref=${(el: HTMLElement) => (span = el)}>${n}</b></p>
  <div class="row">
    <button class="counter" onclick=${withFlushSync}>n++ then flushSync()</button>
    <button class="counter" onclick=${withTick}>n++ then await tick()</button>
  </div>
  <p class="status">${report}</p>
</div>`;

const host = document.getElementById('demo');
if (host) mount(Demo, host);

live preview● running