React useTransition Hook Explained

What Is useTransition?

useTransition is a React hook that lets you mark a state update as a transition — a low-priority update that can run in the background without blocking the UI. It was introduced as part of React's concurrent rendering features and is commonly used alongside useState to keep an app responsive when a state change triggers expensive rendering, like filtering a large list or switching tabs with heavy content.

The Problem It Solves

By default, every state update in React is treated as urgent. If typing into a search box triggers a state update that re-renders a huge list, React renders that list before it can respond to your next keystroke, and the input feels laggy. useTransition tells React "this particular update isn't urgent — keep the page interactive, and render this when you get the chance."

Basic Syntax

import { useTransition, useState } from "react";

function SearchList({ items }) {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState("");
  const [filtered, setFiltered] = useState(items);

  function handleChange(e) {
    const value = e.target.value;
    setQuery(value); // urgent: keeps the input responsive

    startTransition(() => {
      // non-urgent: can be interrupted or delayed
      setFiltered(items.filter((item) => item.includes(value)));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <span>Updating…</span>}
      <ul>
        {filtered.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

useTransition returns two values:

• isPending: a boolean that is true while the transition is still rendering, so you can show a spinner or dim the UI.
• startTransition: a function you wrap around the state update you want to deprioritize.

Why Not Just Use setTimeout?

A setTimeout just delays work; it doesn't make React interruptible. With useTransition, React can pause the low-priority render if something urgent comes in — like another keystroke — and pick it back up later, or throw away stale work entirely. It's a scheduling hint understood by React's renderer, not a blunt delay.

Things to Keep In Mind

• startTransition must wrap a state update, not an async fetch call directly. Update state after the awaited data arrives, and wrap that update instead.
• Transitions are for state updates that cause rendering work, not for things like text input state itself — keep the input's own state update urgent so typing stays smooth.
• Don't overuse it: if a render is already cheap, wrapping it in startTransition adds no benefit.

When to Use useTransition

Reach for useTransition when a state update triggers an expensive re-render — filtering or sorting large lists, switching between tabs with heavy content, or updating charts — and you want the rest of the UI, like inputs and buttons, to stay instantly responsive while that update happens in the background.