Transitions

A search box that can't keep up

A tea shop lists 120 teas, and a search box marks the ones that match what you type. Each row is slow on purpose: in the ProductList.jsx tab, TeaRow loops for 1 millisecond on lines 5 to 8, as a row that does real work would. Click in the box under the code and type green quickly.

1import { useState } from "react";2import ProductList from "./ProductList.jsx";3// The page links the styles.css tab for you.4 5export default function App() {6  const [query, setQuery] = useState("");7  return (8    <>9      <input10        value={query}11        onChange={(event) => setQuery(event.target.value)}12        placeholder="Search teas"13      />14      <ProductList query={query} />15    </>16  );17}

Line 6 keeps one piece of state, query. Line 11 sets it on every key, and line 14 hands it to the list. So every key renders all 120 rows, twice in development, because StrictMode calls each component twice: about a quarter of a second of work. Until that work is done, the box can't show your key. The letters appear late, one by one, behind your fingers. The console says why: Render the list for "g", Show the list for "g", and the same pair for every letter you typed, one after another.

Here is the same page with one change: the list's update is marked as a transition.

1import { useState, useTransition } from "react";2import ProductList from "./ProductList.jsx";3// The page links the styles.css tab for you.4 5function SearchBox({ onSearch }) {6  const [text, setText] = useState("");7  const [isPending, startTransition] = useTransition();8 9  function handleChange(event) {10    setText(event.target.value);11    startTransition(() => {12      onSearch(event.target.value);13    });14  }15 16  return (17    <p>18      <input value={text} onChange={handleChange} placeholder="Search teas" />19      {isPending && " Updating…"}20    </p>21  );22}23 24export default function App() {25  const [query, setQuery] = useState("");26  return (27    <>28      <SearchBox onSearch={setQuery} />29      <ProductList query={query} />30    </>31  );32}

Type green quickly again. Every letter shows in the box at once, Updating… appears next to it, and the marks catch up when you pause. Line 10 shows your key right away. Lines 11 to 13 wrap the list's update in startTransition, which tells React: this can wait, and it can be interrupted. The next sections take it line by line.

Urgent updates and transitions

Every update you've made so far was urgent. React renders an urgent update from the first component to the last without stopping. Your JavaScript and React's rendering share one main thread with the browser, so while React renders, the browser can't draw the page or handle your next key. For a quick render, nobody notices. For 120 slow rows, the page freezes for a moment on every key.

A transition is an update you mark as not urgent. React renders it in small pieces. Between components, it checks whether it has used up its slice of time, and if so, it hands the main thread back, so the browser can draw and handle your next key. Then it picks up where it stopped. If that key made an urgent update, React throws the unfinished transition work away, renders the urgent update first, and then starts the transition again with the newest state. Here are the two loops, from React 19.3.1's own code:

function workLoopSync() {
  // Perform work without checking if we need to yield between fiber.
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}

function workLoopConcurrentByScheduler() {
  // Perform work until Scheduler asks us to yield
  while (workInProgress !== null && !shouldYield()) {
    // $FlowFixMe[incompatible-type] flow doesn't know that shouldYield() is side-effect free
    performUnitOfWork(workInProgress);
  }
}

Lines 1 to 6 are workLoopSync, used for urgent updates. Line 4 renders one unit of work, one component or element, and line 3 keeps going until there are none left. Lines 8 to 14 are workLoopConcurrentByScheduler, used for transitions. Line 10 asks shouldYield() before each unit: React's scheduler says yes after about 5 milliseconds, and React hands the main thread back to the browser. You don't need these names to use transitions. Later, The work loop reads this file, and Lanes and Concurrent rendering, Suspense and transitions inside show how React marks a transition and throws its unfinished work away.

How to read the table: each row is one question, answered for an urgent update and for a transition.

The playground makes the difference measurable. It runs the same kind of search with the React on this page, and times every key you type: how long until a frame showed it in the box, and how long until a frame showed the list for it.

With Plain update, type green quickly: every box bar is long, and every key's list was shown, one after another, while your next keys waited. Choose Transition and type it again: the box bars shrink to a frame or two, and some keys say list: not shown. React started their lists and threw them away when you typed again.

useTransition, line by line

Here is the search with a transition again, now read line by line.

1import { useState, useTransition } from "react";2import ProductList from "./ProductList.jsx";3// The page links the styles.css tab for you.4 5function SearchBox({ onSearch }) {6  const [text, setText] = useState("");7  const [isPending, startTransition] = useTransition();8 9  function handleChange(event) {10    setText(event.target.value);11    startTransition(() => {12      onSearch(event.target.value);13    });14  }15 16  return (17    <p>18      <input value={text} onChange={handleChange} placeholder="Search teas" />19      {isPending && " Updating…"}20    </p>21  );22}23 24export default function App() {25  const [query, setQuery] = useState("");26  return (27    <>28      <SearchBox onSearch={setQuery} />29      <ProductList query={query} />30    </>31  );32}

• Line 7 calls useTransition(). Like useState, it's a hook, so it goes at the top of a component. It takes nothing and gives back two things, which line 7 names with array destructuring: isPending, a boolean, and startTransition, a function.
• Line 10 sets text, the box's own value. That's an urgent update, so the box shows your key at once.
• Lines 11 to 13 call startTransition with a function. React runs that function right away, and marks every state update it makes as a transition. Line 12 calls onSearch, which is setQuery from App (line 28), so the new query, and the slow list it causes, become the transition.
• Line 19 shows Updating… while isPending is true: from the key until the new list is on screen.

So one key makes two renders, and you can see both in the console:

The first, urgent render only involves SearchBox: its text changed, and useTransition set its isPending to true. App's query hasn't changed yet, so React doesn't render App or the list. The second render is the transition: App with the new query, the slow list, and SearchBox again with isPending back to false.

Now type green quickly and read the console. You see Render the list for "g", Render the list for "gr", and so on, but only one Show the list, for the last text. React started the list for each letter, and dropped it when the next letter came:

There's one trap. The urgent render must stay small, or the transition can't help. Here the transition is right, but both pieces of state live in App:

1import { useState, useTransition } from "react";2import ProductList from "./ProductList.jsx";3// The page links the styles.css tab for you.4 5export default function App() {6  const [text, setText] = useState("");7  const [query, setQuery] = useState("");8  const [isPending, startTransition] = useTransition();9 10  function handleChange(event) {11    setText(event.target.value);12    startTransition(() => {13      setQuery(event.target.value);14    });15  }16 17  return (18    <>19      <p>20        <input value={text} onChange={handleChange} placeholder="Search teas" />21        {isPending && " Updating…"}22      </p>23      <ProductList query={query} />24    </>25  );26}

Type in it: the box lags as badly as the first example. Line 11 updates App's text, so the urgent render renders App, and App renders ProductList on line 23, all 120 slow rows, with the old query. The console says it: Render the list for "" after each key. That's why the box's state lives in its own SearchBox component in the fixed version: the urgent render touches only the box. (Another fix is to tell React to skip the list when its props haven't changed, with memo, which memo, useMemo and useCallback covers.)

And why not put the box's own value in the transition too, and keep one component?

function handleChange(event) {
  startTransition(() => {
    setText(event.target.value); // the box's own value: wrong
    onSearch(event.target.value);
  });
}

Line 3 makes the box's value wait for the transition. But the browser has already put your key in the box, and React makes the box show its state, which is still the old text. So the key disappears until the transition is done, and fast typing loses letters. React's documentation says it plainly: a transition can't control a text box. Keep the box urgent, and put what follows from it in the transition. (The next lesson, Deferred values, shows another way, with one piece of state.)

Tabs, and startTransition without the hook

Transitions aren't only for typing. Here a product page has three tabs, and the reviews tab renders 120 slow reviews (the Reviews.jsx tab). Each tab button starts its own transition:

1import { useState, useTransition } from "react";2import Reviews from "./Reviews.jsx";3// The page links the styles.css tab for you.4 5function TabButton({ children, isActive, action }) {6  const [isPending, startTransition] = useTransition();7  if (isActive) return <b>{children}</b>;8  if (isPending) return <b className="pending">{children}…</b>;9  return (10    <button11      onClick={() => {12        startTransition(() => {13          action();14        });15      }}16    >17      {children}18    </button>19  );20}21 22export default function ProductTabs() {23  const [tab, setTab] = useState("details");24  return (25    <>26      <nav>27        <TabButton isActive={tab === "details"} action={() => setTab("details")}>Details</TabButton>28        <TabButton isActive={tab === "reviews"} action={() => setTab("reviews")}>Reviews</TabButton>29        <TabButton isActive={tab === "shipping"} action={() => setTab("shipping")}>Shipping</TabButton>30      </nav>31      {tab === "details" && <p>Green tea, from the hills of Darjeeling.</p>}32      {tab === "reviews" && <Reviews />}33      {tab === "shipping" && <p>Ships in 2 days.</p>}34    </>35  );36}

TabButton calls useTransition on line 6. Its click, lines 11 to 15, calls the action prop inside startTransition, so the parent's setTab becomes a transition. React's documentation suggests naming a prop like this action, or ending its name in Action, so readers know it runs in a transition. While it's pending, line 8 shows the button as Reviews…. Click Reviews, then Shipping straight away: the page answers both clicks, and you land on Shipping without waiting for the reviews. Without the transition (exercise 4 starts that way), clicking Reviews freezes the page for about a quarter of a second, and your click on Shipping waits.

useTransition is a hook, so only components and other hooks can call it. Code elsewhere, like a router or a store, can import startTransition from react itself. It works the same way, but there's no isPending:

1import { startTransition, useState } from "react";2import Reviews from "./Reviews.jsx";3// The page links the styles.css tab for you.4 5export default function ProductTabs() {6  const [tab, setTab] = useState("details");7 8  function select(next) {9    startTransition(() => {10      setTab(next);11    });12  }13 14  return (15    <>16      <nav>17        <button onClick={() => select("details")}>Details</button>18        <button onClick={() => select("reviews")}>Reviews</button>19        <button onClick={() => select("shipping")}>Shipping</button>20      </nav>21      {tab === "details" && <p>Green tea, from the hills of Darjeeling.</p>}22      {tab === "reviews" && <Reviews />}23      {tab === "shipping" && <p>Ships in 2 days.</p>}24    </>25  );26}

Line 1 imports it, and lines 8 to 12 switch tabs inside it. Click Reviews, then Shipping: the page doesn't freeze, but nothing shows that the reviews are on their way, because there's no isPending. Use the hook in components, and this one where a hook can't go.

Two rules about the function you pass. First, React calls it at once, not later. Click the button and read the console:

1import { startTransition, useState } from "react";2 3export default function App() {4  const [tab, setTab] = useState("details");5 6  function showReviews() {7    console.log(1);8    startTransition(() => {9      console.log(2);10      setTab("reviews");11    });12    console.log(3);13  }14 15  return <button onClick={showReviews}>Tab: {tab}</button>;16}

The console says 1, 2, 3: line 7, then line 9 inside the function, then line 12. startTransition isn't a timer. It sets a mark, calls your function, and removes the mark; every update made while the mark is set, like line 10's, is a transition. Second, so an update made later, after the function has returned, isn't one:

startTransition(() => {
  setTimeout(() => {
    setTab("reviews"); // runs after startTransition has returned: not a transition
  }, 100);
});

setTimeout(() => {
  startTransition(() => {
    setTab("reviews"); // a transition
  });
}, 100);

In the first block, the function only starts a timer and returns; setTab runs 100 ms later, when the mark is gone. In the second, the timer calls startTransition, and setTab runs inside it. Both are fragments, so they aren't live.

Async functions in a transition: actions

Since React 19, the function you pass to startTransition can be async. React calls a function run in a transition an action. The transition then lasts until the async function finishes, so isPending covers the waiting too. Here a cart line saves its quantity on a pretend server (the api.js tab takes 0.8 seconds):

1import { useState, useTransition } from "react";2import { saveQuantity } from "./api.js";3 4export default function CartLine() {5  const [quantity, setQuantity] = useState(1);6  const [isPending, startTransition] = useTransition();7 8  function addOne() {9    startTransition(async () => {10      const saved = await saveQuantity(quantity + 1);11      startTransition(() => {12        setQuantity(saved);13      });14    });15  }16 17  return (18    <>19      <p>Green tea × {quantity} {isPending && "(saving…)"}</p>20      <button disabled={isPending} onClick={addOne}>Add one</button>21    </>22  );23}

Line 9 starts the transition with an async function. Line 10 waits for the save. Lines 11 to 13 set the saved quantity in another startTransition: after an await, React can't tell that the code still belongs to the transition (JavaScript has no way yet to carry that mark across an await), so React's documentation asks you to wrap updates after an await again. Line 19 shows (saving…), and line 20 disables the button, for the whole 0.8 seconds. Click Add one: (saving…), the console's Save 2, then Green tea × 2.

Before actions, you kept a pending flag yourself:

const [saving, setSaving] = useState(false);

async function addOne() {
  setSaving(true);
  const saved = await saveQuantity(quantity + 1);
  setQuantity(saved);
  setSaving(false);
}

Lines 4 and 7 set and clear the flag, and nothing clears it if the save throws. With an action, React keeps isPending for you, and an error thrown in the action goes to the nearest error boundary, the Error boundaries lesson's subject. You've already used actions without calling startTransition: a form's action prop runs its function in a transition, as Form actions showed, and Optimistic UI built on the same rule about wrapping updates after an await. Exercise 5 shows what goes wrong when you forget it.

Keep the old page while the new one loads

Transitions matter most when new content isn't ready. In Suspense, a plain update that made a shown component wait replaced it with a fallback. Here is a small app with two pages. The orders page reads its data with use, and the data.js tab takes 1.2 seconds to answer, the first time.

1import { Suspense, use, useState } from "react";2import { fetchOrders } from "./data.js";3 4function ShopPage() {5  return <p>Teas, cakes, and scones.</p>;6}7 8function OrdersPage() {9  const orders = use(fetchOrders());10  return (11    <ul>12      {orders.map((order) => <li key={order}>{order}</li>)}13    </ul>14  );15}16 17export default function App() {18  const [page, setPage] = useState("shop");19 20  function go(next) {21    setPage(next);22  }23 24  return (25    <>26      <nav>27        <button onClick={() => go("shop")}>Shop</button>28        <button onClick={() => go("orders")}>Your orders</button>29      </nav>30      <Suspense fallback={<p>Loading the page…</p>}>31        {page === "shop" ? <ShopPage /> : <OrdersPage />}32      </Suspense>33    </>34  );35}

Click Your orders. Line 21 sets the page, OrdersPage suspends on line 9, and the boundary on lines 30 to 32 hides the shop and shows Loading the page… for 1.2 seconds. The page you were reading is gone, and there's nothing to read meanwhile. Now the same app, going to a page in a transition:

1import { Suspense, use, useState, useTransition } from "react";2import { fetchOrders } from "./data.js";3 4function ShopPage() {5  return <p>Teas, cakes, and scones.</p>;6}7 8function OrdersPage() {9  const orders = use(fetchOrders());10  return (11    <ul>12      {orders.map((order) => <li key={order}>{order}</li>)}13    </ul>14  );15}16 17export default function App() {18  const [page, setPage] = useState("shop");19  const [isPending, startTransition] = useTransition();20 21  function go(next) {22    startTransition(() => {23      setPage(next);24    });25  }26 27  return (28    <>29      <nav>30        <button onClick={() => go("shop")}>Shop</button>31        <button onClick={() => go("orders")}>Your orders</button>32        {isPending && " Loading…"}33      </nav>34      <Suspense fallback={<p>Loading the page…</p>}>35        {page === "shop" ? <ShopPage /> : <OrdersPage />}36      </Suspense>37    </>38  );39}

Lines 21 to 25 set the page inside startTransition. Click Your orders: the shop stays, the menu says Loading… (line 32), and after 1.2 seconds the orders replace the shop in one step. In a transition, React doesn't hide content that's already on screen; it waits until the new page can render. (Press Shop and Your orders again: the orders come from the cache in data.js now, so there's no wait.)

That's why routers in frameworks start every navigation as a transition. A transition only keeps what's already showing, though. A Suspense boundary that appears for the first time, with nothing old to keep, still shows its fallback.

What a transition doesn't do

A transition changes the order in which React renders. It doesn't change anything outside React. Here a search asks a pretend server on every key, inside an action:

1import { useState, useTransition } from "react";2import { searchTeas } from "./api.js";3 4export default function Search() {5  const [text, setText] = useState("");6  const [results, setResults] = useState([]);7  const [isPending, startTransition] = useTransition();8 9  function handleChange(event) {10    const next = event.target.value;11    setText(next);12    startTransition(async () => {13      const found = await searchTeas(next);14      startTransition(() => {15        setResults(found);16      });17    });18  }19 20  return (21    <>22      <input value={text} onChange={handleChange} placeholder="Search teas" />23      {isPending && " Searching…"}24      <ul>25        {results.map((name) => <li key={name}>{name}</li>)}26      </ul>27    </>28  );29}

Lines 12 to 17 run on every key, and line 13 asks the server each time. Type green: the console says Ask the server for "g", then "gr", and so on, five requests. A transition doesn't wait for you to stop typing, and React can't take back a request your code already sent. Waiting for a pause is a debounce:

1import { useEffect, useState } from "react";2import { searchTeas } from "./api.js";3 4export default function Search() {5  const [text, setText] = useState("");6  const [results, setResults] = useState([]);7 8  useEffect(() => {9    let ignore = false;10    const timer = setTimeout(async () => {11      const found = await searchTeas(text);12      if (!ignore) setResults(found);13    }, 300);14    return () => {15      ignore = true;16      clearTimeout(timer);17    };18  }, [text]);19 20  return (21    <>22      <input value={text} onChange={(event) => setText(event.target.value)} placeholder="Search teas" />23      <ul>24        {results.map((name) => <li key={name}>{name}</li>)}25      </ul>26    </>27  );28}

The effect on lines 8 to 18 starts a 300 ms timer for each new text, and its cleanup cancels the timer, so only the text you paused on reaches line 11. When the page opens, it asks once for the empty text. Type green quickly: one more request, for "green". The ignore flag on line 12 drops an old answer, as in Fetching data. To avoid asking twice for the same text, a cache helps, like the one in Data fetching libraries.

How to read the table: each row is one question, answered for a transition and for a debounce.

Two more things a transition doesn't do:

• It doesn't make rendering faster. The list still costs the same work. A transition lets other things go first, and throws away work you no longer need.
• It can't split one slow component. React only stops between units of work, between components. If one component loops for 250 ms by itself, the box waits for it, transition or not. Spread slow work over many components, like the rows here, or make it faster.

A tea catalogue with a search and tabs

Here are both ideas in one page: kind buttons that switch in a transition, and a search box whose results follow in one. The Catalogue.jsx tab draws a slow card per tea.

1import { useState, useTransition } from "react";2import Catalogue from "./Catalogue.jsx";3// The page links the styles.css tab for you.4 5function KindButton({ kind, isActive, action }) {6  const [isPending, startTransition] = useTransition();7  if (isActive) return <b>{kind}</b>;8  return (9    <button disabled={isPending} onClick={() => startTransition(() => action())}>10      {isPending ? `${kind}…` : kind}11    </button>12  );13}14 15function SearchBox({ action }) {16  const [text, setText] = useState("");17  const [isPending, startTransition] = useTransition();18  function handleChange(event) {19    setText(event.target.value);20    startTransition(() => action(event.target.value));21  }22  return (23    <p>24      <input value={text} onChange={handleChange} placeholder="Search teas" />25      {isPending && " Updating…"}26    </p>27  );28}29 30export default function Shop() {31  const [kind, setKind] = useState("All");32  const [query, setQuery] = useState("");33  return (34    <>35      <nav>36        {["All", "Green", "Black", "Mint"].map((name) => (37          <KindButton key={name} kind={name} isActive={kind === name} action={() => setKind(name)} />38        ))}39      </nav>40      <SearchBox action={setQuery} />41      <Catalogue kind={kind} query={query} />42    </>43  );44}

KindButton on lines 5 to 13 owns its useTransition, so its urgent render is just the button: line 9 disables it, and line 10 adds … while its kind loads. SearchBox on lines 15 to 28 owns the box's text, and line 20 hands the query to Shop in a transition. Shop on lines 30 to 44 owns kind and query, and only transitions change them, so the slow Catalogue never renders in an urgent update. Click Green, type 2, and click All, quickly: every click and key answers at once, and the cards follow.

Common mix-ups

• "A transition makes rendering faster." No. The same work happens. Urgent updates go first, and work that became useless is thrown away.
• "startTransition runs my function later, like setTimeout." No. It runs it at once. Only the updates made while it runs are marked.
• "Any transition keeps typing fast." No. If the urgent render also renders the slow part, as when the box and the list share one component, typing still lags. Keep the urgent render small.
• "I can put the box's own value in a transition." No. React keeps showing the old text until the transition is done, and keys get lost. The box's value stays urgent.
• "A transition is a debounce." No. It starts at once on every key. Requests in your handler still go out each time.
• "Updates after an await are still part of the transition." No. Wrap them in startTransition again, or a page that suspends shows its fallback.
• "A transition runs on another thread." No. It runs on the main thread, in pieces. One component that loops for 250 ms blocks everything, transition or not.

Practice exercises

Each exercise has a live result. Click and type in it, change the code with Edit & run, and open the console to see the renders and the requests.

import { startTransition, useState } from "react";

export default function App() {
  const [tab, setTab] = useState("details");

  function showReviews() {
    console.log(1);
    startTransition(() => {
      console.log(2);
      setTab("reviews");
    });
    console.log(3);
  }

  return <button onClick={showReviews}>Tab: {tab}</button>;
}

1import { startTransition, useState } from "react";2 3export default function App() {4  const [tab, setTab] = useState("details");5 6  function showReviews() {7    console.log(1);8    startTransition(() => {9      console.log(2);10      setTab("reviews");11    });12    console.log(3);13  }14 15  return <button onClick={showReviews}>Tab: {tab}</button>;16}

1import { useState, useTransition } from "react";2import ProductList from "./ProductList.jsx";3// The page links the styles.css tab for you.4 5function SearchBox({ onSearch }) {6  const [text, setText] = useState("");7  const [, startTransition] = useTransition();8 9  function handleChange(event) {10    setText(event.target.value);11    startTransition(() => {12      onSearch(event.target.value);13    });14  }15 16  return (17    <p>18      <input value={text} onChange={handleChange} placeholder="Search teas" />19    </p>20  );21}22 23export default function App() {24  const [query, setQuery] = useState("");25  return (26    <>27      <SearchBox onSearch={setQuery} />28      <ProductList query={query} />29    </>30  );31}

1import { useState, useTransition } from "react";2import ProductList from "./ProductList.jsx";3// The page links the styles.css tab for you.4 5function SearchBox({ onSearch }) {6  const [text, setText] = useState("");7  const [isPending, startTransition] = useTransition();8 9  function handleChange(event) {10    setText(event.target.value);11    startTransition(() => {12      onSearch(event.target.value);13    });14  }15 16  return (17    <p>18      <input value={text} onChange={handleChange} placeholder="Search teas" />19      {isPending && " Updating…"}20    </p>21  );22}23 24export default function App() {25  const [query, setQuery] = useState("");26  return (27    <>28      <SearchBox onSearch={setQuery} />29      <ProductList query={query} />30    </>31  );32}

1import { useState, useTransition } from "react";2import ProductList from "./ProductList.jsx";3// The page links the styles.css tab for you.4 5export default function App() {6  const [text, setText] = useState("");7  const [query, setQuery] = useState("");8  const [isPending, startTransition] = useTransition();9 10  function handleChange(event) {11    setText(event.target.value);12    startTransition(() => {13      setQuery(event.target.value);14    });15  }16 17  return (18    <>19      <p>20        <input value={text} onChange={handleChange} placeholder="Search teas" />21        {isPending && " Updating…"}22      </p>23      <ProductList query={query} />24    </>25  );26}

1import { useState, useTransition } from "react";2import ProductList from "./ProductList.jsx";3// The page links the styles.css tab for you.4 5function SearchBox({ onSearch }) {6  const [text, setText] = useState("");7  const [isPending, startTransition] = useTransition();8 9  function handleChange(event) {10    setText(event.target.value);11    startTransition(() => {12      onSearch(event.target.value);13    });14  }15 16  return (17    <p>18      <input value={text} onChange={handleChange} placeholder="Search teas" />19      {isPending && " Updating…"}20    </p>21  );22}23 24export default function App() {25  const [query, setQuery] = useState("");26  return (27    <>28      <SearchBox onSearch={setQuery} />29      <ProductList query={query} />30    </>31  );32}

1import { useState } from "react";2import Reviews from "./Reviews.jsx";3// The page links the styles.css tab for you.4 5function TabButton({ children, isActive, action }) {6  if (isActive) return <b>{children}</b>;7  return <button onClick={action}>{children}</button>;8}9 10export default function ProductTabs() {11  const [tab, setTab] = useState("details");12  return (13    <>14      <nav>15        <TabButton isActive={tab === "details"} action={() => setTab("details")}>Details</TabButton>16        <TabButton isActive={tab === "reviews"} action={() => setTab("reviews")}>Reviews</TabButton>17        <TabButton isActive={tab === "shipping"} action={() => setTab("shipping")}>Shipping</TabButton>18      </nav>19      {tab === "details" && <p>Green tea, from the hills of Darjeeling.</p>}20      {tab === "reviews" && <Reviews />}21      {tab === "shipping" && <p>Ships in 2 days.</p>}22    </>23  );24}

1import { useState, useTransition } from "react";2import Reviews from "./Reviews.jsx";3// The page links the styles.css tab for you.4 5function TabButton({ children, isActive, action }) {6  const [isPending, startTransition] = useTransition();7  if (isActive) return <b>{children}</b>;8  if (isPending) return <b className="pending">{children}…</b>;9  return (10    <button11      onClick={() => {12        startTransition(() => {13          action();14        });15      }}16    >17      {children}18    </button>19  );20}21 22export default function ProductTabs() {23  const [tab, setTab] = useState("details");24  return (25    <>26      <nav>27        <TabButton isActive={tab === "details"} action={() => setTab("details")}>Details</TabButton>28        <TabButton isActive={tab === "reviews"} action={() => setTab("reviews")}>Reviews</TabButton>29        <TabButton isActive={tab === "shipping"} action={() => setTab("shipping")}>Shipping</TabButton>30      </nav>31      {tab === "details" && <p>Green tea, from the hills of Darjeeling.</p>}32      {tab === "reviews" && <Reviews />}33      {tab === "shipping" && <p>Ships in 2 days.</p>}34    </>35  );36}

1import { Suspense, use, useState, useTransition } from "react";2import { fetchOrders, saveVisit } from "./data.js";3 4function ShopPage() {5  return <p>Teas, cakes, and scones.</p>;6}7 8function OrdersPage() {9  const orders = use(fetchOrders());10  return (11    <ul>12      {orders.map((order) => <li key={order}>{order}</li>)}13    </ul>14  );15}16 17export default function App() {18  const [page, setPage] = useState("shop");19  const [isPending, startTransition] = useTransition();20 21  function go(next) {22    startTransition(async () => {23      await saveVisit();24      setPage(next);25    });26  }27 28  return (29    <>30      <nav>31        <button onClick={() => go("shop")}>Shop</button>32        <button onClick={() => go("orders")}>Your orders</button>33        {isPending && " Loading…"}34      </nav>35      <Suspense fallback={<p>Loading the page…</p>}>36        {page === "shop" ? <ShopPage /> : <OrdersPage />}37      </Suspense>38    </>39  );40}

1import { Suspense, use, useState, useTransition } from "react";2import { fetchOrders, saveVisit } from "./data.js";3 4function ShopPage() {5  return <p>Teas, cakes, and scones.</p>;6}7 8function OrdersPage() {9  const orders = use(fetchOrders());10  return (11    <ul>12      {orders.map((order) => <li key={order}>{order}</li>)}13    </ul>14  );15}16 17export default function App() {18  const [page, setPage] = useState("shop");19  const [isPending, startTransition] = useTransition();20 21  function go(next) {22    startTransition(async () => {23      await saveVisit();24      startTransition(() => {25        setPage(next);26      });27    });28  }29 30  return (31    <>32      <nav>33        <button onClick={() => go("shop")}>Shop</button>34        <button onClick={() => go("orders")}>Your orders</button>35        {isPending && " Loading…"}36      </nav>37      <Suspense fallback={<p>Loading the page…</p>}>38        {page === "shop" ? <ShopPage /> : <OrdersPage />}39      </Suspense>40    </>41  );42}

1import { useState, useTransition } from "react";2import { searchTeas } from "./api.js";3 4export default function Search() {5  const [text, setText] = useState("");6  const [results, setResults] = useState([]);7  const [isPending, startTransition] = useTransition();8 9  function handleChange(event) {10    const next = event.target.value;11    setText(next);12    startTransition(async () => {13      const found = await searchTeas(next);14      startTransition(() => {15        setResults(found);16      });17    });18  }19 20  return (21    <>22      <input value={text} onChange={handleChange} placeholder="Search teas" />23      {isPending && " Searching…"}24      <ul>25        {results.map((name) => <li key={name}>{name}</li>)}26      </ul>27    </>28  );29}

1import { useEffect, useState } from "react";2import { searchTeas } from "./api.js";3 4export default function Search() {5  const [text, setText] = useState("");6  const [results, setResults] = useState([]);7 8  useEffect(() => {9    let ignore = false;10    const timer = setTimeout(async () => {11      const found = await searchTeas(text);12      if (!ignore) setResults(found);13    }, 300);14    return () => {15      ignore = true;16      clearTimeout(timer);17    };18  }, [text]);19 20  return (21    <>22      <input value={text} onChange={(event) => setText(event.target.value)} placeholder="Search teas" />23      <ul>24        {results.map((name) => <li key={name}>{name}</li>)}25      </ul>26    </>27  );28}

Check your understanding

For each question, ask which update is urgent, which is a transition, and what is already on the screen.

Key takeaways

• Urgent updates render to the end, without stopping. A slow one freezes typing and clicking.
• A transition renders in the background, in pieces. Urgent updates go first, and unfinished transition work is thrown away.
• useTransition gives isPending and startTransition. The standalone startTransition from react works anywhere, without isPending.
• Keep the urgent render small: the box's own value stays urgent, in a component that doesn't render the slow part.
• Since React 19, the function can be async: an action. Wrap updates after an await in startTransition again.
• In a transition, React keeps content that's already on screen instead of showing a Suspense fallback.
• A transition isn't a debounce, doesn't touch the network, and can't split one slow component.

Coming next: Deferred values. With useDeferredValue, one piece of state can lag behind on purpose, so a slow list follows your typing in the background.