React useTransition Hook: Keep the UI Responsive

useTransition lets you mark a state update as non-urgent. React renders that update in the background and drops or restarts it if something more urgent happens, like a click or a keystroke, so the page stays responsive while a slow part of the screen catches up.

import { useState, useTransition } from 'react';

function SlowPost({ index }) {
    const start = performance.now();
    while (performance.now() - start < 1) {
        // each post takes 1 ms to render
    }
    return <li>Post #{index + 1}</li>;
}

function PostsTab() {
    console.log('rendering 300 slow posts');
    const posts = [];
    for (let i = 0; i < 300; i++) posts.push(<SlowPost key={i} index={i} />);
    return <ul style={{ maxHeight: 150, overflow: 'auto' }}>{posts}</ul>;
}

export default function App() {
    const [tab, setTab] = useState('about');
    const [isPending, startTransition] = useTransition();

    function select(next) {
        startTransition(() => {
            setTab(next);
        });
    }

    return (
        <div>
            {['about', 'posts', 'contact'].map((name) => (
                <button key={name} onClick={() => select(name)} disabled={tab === name}>
                    {name}
                </button>
            ))}
            {isPending && <span> Loading...</span>}
            {tab === 'about' && <p>Welcome to my profile.</p>}
            {tab === 'posts' && <PostsTab />}
            {tab === 'contact' && <p>Write to me any time.</p>}
        </div>
    );
}

Click posts and then, before the list appears, click contact. Contact shows at once: React threw away the half-finished posts render. Now change startTransition(() => { setTab(next); }) to a plain setTab(next); and try the same thing: the page freezes for about 300 ms after clicking posts, and your click on contact waits until the posts are done.

The syntax

const [isPending, startTransition] = useTransition();

startTransition(() => {
    setTab(next);
});

• startTransition takes a function and runs it right away. Any state updates inside it are marked as transitions.
• isPending is true from the moment you start the transition until React has finished rendering it and committed the result.

useTransition takes no arguments. The function you pass runs synchronously; the transition is about how React renders the resulting update, not about when your function runs.

What "non-urgent" means

React splits updates into two kinds. Urgent updates, such as typing, clicking and pressing, need to reflect immediately or the page feels broken. Transition updates, such as switching to a new view or showing filtered results, can take a moment.

React renders a transition in small slices and checks between components whether something urgent came in. If it did, React pauses or abandons the transition, handles the urgent update, and then starts the transition again with the latest state. While a transition renders, the previous screen stays up; React does not show a half-built result. That is why the example keeps showing the about text, with the Loading hint beside the buttons, until the posts are ready.

Interruption happens between components. A single component that blocks for 300 ms cannot be cut in half, which is why the slow work above is spread over 300 small SlowPost components.

Showing a pending hint

isPending is the place for a loading indicator that does not replace the current content: a spinner next to the button, dimmed text, a "Saving..." label. In the first example it shows Loading... beside the tabs. You can also use it to style the content:

<div style={{ opacity: isPending ? 0.6 : 1 }}>{content}</div>

Filtering a big list while typing

You cannot put an input's own value in a transition. A controlled <input> must receive its new value in the same urgent update, or characters get dropped. Keep two pieces of state instead: the text of the input (urgent) and the query the list uses (a transition).

import { memo, useState, useTransition } from 'react';

const all = Array.from({ length: 2000 }, (_, i) => `Item ${i}`);

function SlowRow({ text }) {
    const start = performance.now();
    while (performance.now() - start < 1) {}
    return <li>{text}</li>;
}

const Results = memo(function Results({ query }) {
    console.log('rendering results for', JSON.stringify(query));
    const matches = all.filter((item) => item.includes(query)).slice(0, 200);
    return (
        <ul style={{ maxHeight: 150, overflow: 'auto' }}>
            {matches.map((m) => <SlowRow key={m} text={m} />)}
        </ul>
    );
});

export default function App() {
    const [text, setText] = useState('');
    const [query, setQuery] = useState('');
    const [isPending, startTransition] = useTransition();

    function handleChange(e) {
        setText(e.target.value);
        startTransition(() => {
            setQuery(e.target.value);
        });
    }

    return (
        <div>
            <input value={text} onChange={handleChange} placeholder="Try 12" />
            <div style={{ opacity: isPending ? 0.5 : 1 }}>
                <Results query={query} />
            </div>
        </div>
    );
}

Type 123 quickly. The input never lags. The Console still logs one rendering results line per keystroke, because Results logs as soon as React starts rendering it, but the lists for 1 and 12 never reach the screen: each newer keystroke interrupted the render in progress, and React started again with the latest query. Results is wrapped in memo on purpose: without it, the urgent render for each keystroke would also render the slow list with the old query, and you would lose the benefit.

startTransition without the hook

react also exports startTransition as a plain function. It marks updates as transitions just like the hook does, but you get no isPending. Use it where you cannot call a hook, for example in a data library or a router outside any component.

import { startTransition } from 'react';

function navigate(url) {
    startTransition(() => {
        setCurrentUrl(url);
    });
}

Async transitions in React 19

Since React 19 the function you pass can be async. isPending then stays true for the whole time the function runs, including the waiting, which makes it a simple way to show a pending state during a request. The fake saveName below stands in for a real request.

import { useState, useTransition } from 'react';

function saveName(name) {
    return new Promise((resolve) => setTimeout(() => resolve(name.trim()), 800));
}

export default function App() {
    const [draft, setDraft] = useState('Ada');
    const [saved, setSaved] = useState('');
    const [isPending, startTransition] = useTransition();

    function handleSave() {
        startTransition(async () => {
            console.log('saving', draft);
            const result = await saveName(draft);
            startTransition(() => {
                setSaved(result);
            });
            console.log('saved', result);
        });
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={handleSave} disabled={isPending}>
                {isPending ? 'Saving...' : 'Save'}
            </button>
            <p>Saved name: {saved || '(nothing yet)'}</p>
        </div>
    );
}

Note the second startTransition around setSaved. React loses track of the transition across an await, so a state update after it has to be wrapped again to count as part of the transition. React calls a function passed this way an action; useActionState and form actions build on the same mechanism.

A transition is not a debounce

A debounce waits a fixed amount of time after the last keystroke before doing anything. A transition does not wait. It starts rendering immediately, and if a newer update arrives it drops the old work. On a fast device the result appears with no delay at all; on a slow one, React does as much as it can between keystrokes. What a transition cannot do is reduce the number of network requests: if each keystroke starts a fetch, debounce the fetch.

Transitions and Suspense

Transitions also change what a Suspense boundary does. Normally, when a component inside a boundary suspends (a lazy component loading, or data read with use), React replaces the content with the fallback. If the update that caused the suspension was a transition, React keeps the content that is already on screen instead, and isPending stays true until the new content is ready. This is how routers avoid flashing a page-sized spinner on every navigation: they wrap the navigation in a transition, and the old page stays visible until the next one can render. Content that has never been shown still uses the fallback, so a newly revealed boundary behaves as usual.

Things that do not work

• Updates inside a timeout. startTransition(() => setTimeout(() => setTab(next), 100)) does not mark the update, because it runs after startTransition has returned. Put startTransition inside the timeout instead.
• A single slow component. React can only interrupt between components, so one component that blocks for a long time still blocks.
• Controlling an input. As above, the input's own state stays urgent.

For the case where you do not own the state setter and only receive a value, such as a prop, useDeferredValue gives you the same behaviour.