Chapter 90: startTransition

Core Idea

startTransition(scope) is the standalone-function form of useTransition's startTransition — same low-priority-update behavior, usable outside component/Hook context, but without the accompanying isPending flag.

Key Concepts

• Signature: startTransition(() => { setState(...); }) — marks the state update(s) inside scope as a transition, exactly like the function returned by useTransition().
• Difference from useTransition's version: this standalone import has no associated isPending boolean — use it when you need to mark an update as low-priority but don't need to render a pending indicator, or when calling from outside a component (e.g. a module-level utility function that isn't itself a Hook context).
• Same interruptibility semantics: a transition started this way is still preemptible by a more urgent update, same as Ch 65 describes.
• When to prefer useTransition instead: any time a pending indicator (spinner, disabled state) needs to reflect whether the transition is still in flight — that requires the Hook form's isPending, which this standalone function doesn't provide.

Code Examples

import { startTransition } from 'react';

function handleClick() {
  startTransition(() => {
    setTab('comments'); // marked low-priority, no isPending available here
  });
}

• What it demonstrates: the same transition-marking behavior as useTransition, used where no pending UI feedback is needed.

Key Takeaways

1. Prefer useTransition (Ch 65) whenever you need to show pending state; reach for the standalone startTransition only when you specifically don't need isPending.
2. Both forms share identical interruptibility and "Action" semantics — the only difference is the missing pending flag.
3. This is importable and callable outside component bodies, unlike Hook-based useTransition.

Connects To

• Ch 65 (useTransition): the Hook form with the accompanying isPending flag.