useTransition

Runs fn as a transition and reports whether it is pending. Returns [isPending, start]: isPending is true from start(fn) until the transition has been applied (including any Suspense boundary it waits on); start(fn) is startTransition that also updates isPending.

Use it for updates that may be slow to show (navigating to a page that loads data): the previous screen stays until the new one is ready, and the input stays responsive meanwhile.

Import#

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

Signature#

function useTransition(): [Accessor<boolean>, (fn: () => void) => Promise<void>]

Returns#

[isPending, start]. isPending is an accessor; start returns a promise that resolves when the transition has been applied. On the server start runs fn at once.

Throws#

• Nothing itself. start rethrows synchronously what fn throws, after clearing isPending when no other transition of this hook is running.

Examples#

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

function Tabs() {
  const [page, setPage] = useSignal("home");
  const [pending, start] = useTransition();
  return (
    <button disabled={pending()} onClick={() => start(() => setPage("reports"))}>
      {page() === "reports" ? "Reports" : "Open reports"}
    </button>
  );
}