startTransition (@shadow-js/core/extend)

Runs fn as a transition: the effects its writes wake wait in the transition lane, which runs after urgent work (in a macrotask, one chunk at a time). Reads see the writes at once; the DOM catches up when the lane runs. Use it for an update that may be slow to render or load, so input stays responsive and a Suspense boundary keeps its content instead of showing its fallback. fn runs untracked. The returned promise resolves when the lane is idle and no Suspense boundary holds the transition.

On the server there are no effects, so fn simply runs and the promise is already resolved.

Import#

import { startTransition } from "@shadow-js/core/extend";

Signature#

function startTransition(fn: () => void): Promise<void>

Parameters#

Returns#

A promise that resolves when the transition has been applied.

Throws#

• What fn throws, synchronously; no transition is started then.

Examples#

import { startTransition, useSignal } from "@shadow-js/core";

const [page, setPage] = useSignal("home");
async function openReports(): Promise<void> {
  await startTransition(() => setPage("reports"));
  console.log(`${page()} is on screen`);
}