Transitions and Deferred Values

Concurrent rendering lets React interrupt non-urgent updates. Mark state updates as transitions with startTransition/useTransition so urgent updates (typing, clicking) stay responsive while heavy re-renders happen in the background; isPending shows progress. useDeferredValue gives you a lagging copy of a value to render expensive results without blocking input. React 19 allows async functions in transitions (Actions).

import { useDeferredValue, useState, useTransition } from "react";

export function SearchPage() {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);      // results may lag behind input
  const isStale = query !== deferredQuery;

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <div style={{ opacity: isStale ? 0.6 : 1 }}>
        <ExpensiveResults query={deferredQuery} />
      </div>
    </>
  );
}

export function Tabs() {
  const [tab, setTab] = useState("overview");
  const [isPending, startTransition] = useTransition();
  return (
    <nav aria-busy={isPending}>
      {["overview", "analytics"].map((t) => (
        <button key={t} onClick={() => startTransition(() => setTab(t))}>{t}</button>
      ))}
    </nav>
  );
}

Common pitfalls

• Wrapping controlled input updates in transitions (the input lags).
• Expecting transitions to speed up slow components — they keep the UI responsive, not faster.
• Forgetting memo on the expensive child with useDeferredValue (it re-renders anyway).

Key points

• Transitions mark non-urgent updates
• useDeferredValue for lagging expensive renders
• Async transitions = React 19 Actions

Further reading: react.dev: useTransition