useTransition Explained

useTransition is a React 18+ concurrent hook that lets you mark some state updates as non-urgent.

This helps your app stay responsive by making React prioritize:

• ✅ urgent updates (typing, clicking, input responsiveness) over
• ⏳ slow UI updates (big list rendering, expensive filtering, heavy page transitions)

🧩 The Problem It Solves

Imagine a search input where filtering is heavy:

• User types: input updates
• At the same time, you render a huge list based on the text

Without useTransition, React treats both as equally urgent → typing can feel laggy.

⚙️ Basic API

import { useTransition, useState } from "react"; export default function SearchPage({ items }: { items: string[] }) { const [query, setQuery] = useState(""); const [filter, setFilter] = useState(""); const [isPending, startTransition] = useTransition(); function onChange(e: React.ChangeEvent<HTMLInputElement>) { const value = e.target.value; // ✅ urgent: update input right away setQuery(value); // ⏳ non-urgent: update expensive list/filter startTransition(() => { setFilter(value); }); } const filtered = items.filter((x) => x.includes(filter)); return ( <div> <input value={query} onChange={onChange} /> {isPending && <p>Updating results…</p>} <ul> {filtered.map((x) => ( <li key={x}>{x}</li> ))} </ul> </div> ); } 

What you get

• startTransition(fn) marks updates inside as transition (low priority).
• isPending becomes true while React is working on those updates.

🧠 Mental Model

Think of React updates like a queue with priorities:

• Urgent lane: typing, clicks, pointer movement
• Transition lane: slow rendering that can wait

startTransition moves updates into the transition lane.

So the user experience becomes:

• input stays snappy ✅
• expensive rendering happens a bit later ⏳

🔍 How It Works Under the Hood

React Fiber + Scheduler does this:

1. setQuery(value) schedules an urgent update.
2. startTransition(() => setFilter(value)) schedules a low priority update.
3. If the user keeps typing, React may:
   • pause the low priority render
   • restart it with the latest value
   • skip intermediate renders

That’s why transitions feel smooth: React avoids wasting work.

⚡ useTransition vs useDeferredValue

Rule of thumb

• Use useTransition when you want to say: “this update can wait.”
• Use useDeferredValue when you want: “render using an older value until you have time.”

✅ Great Use Cases

• Filtering large lists
• Switching tabs with heavy content
• Updating charts
• Navigating to a route that triggers lots of work
• Anything where “loading/pending” UX helps

⚠️ What useTransition is NOT

• ❌ It is not debounce/throttle
• ❌ It does not run work in a separate thread
• ❌ It doesn’t magically make slow code fast — it just makes the UI stay responsive

If your render is extremely slow, consider:

• memoization (useMemo, React.memo)
• virtualization (react-window)
• splitting components / code-splitting
• improving algorithms

🧱 Common Mistakes

1) Putting urgent updates inside transition

startTransition(() => { setQuery(value); // ❌ makes typing laggy }); 

Keep input updates urgent.

2) Creating new heavy objects on every render

If your filtered list is recomputed every render, also consider memoizing or pre-indexing.

🔁 isPending UX pattern

{isPending ? <Spinner /> : <Results />} 

or keep results visible and show subtle hint:

{isPending && <small>Updating…</small>} 

✅ Summary

• useTransition marks updates as low priority.
• It protects user input from being blocked by heavy renders.
• Powered by Fiber + Scheduler, React can pause/restart work.
• Pair it with good performance practices for best results.

✨ useTransition makes React apps feel instant by keeping “urgent UI” always responsive.

Originally published on Bitlyst.