what is useTransition ?

by Mcs July 3, 2025

useTransition() is a React Hook that helps you mark state updates as “non-urgent” so the UI stays responsive — even during slow renders.

useTransition() is a React hook introduced in React 18 that allows you to mark certain state updates as "non-urgent" or "transitions." This is particularly useful for improving the responsiveness of your application's user interface during computationally intensive or potentially slow updates.

Why Use useTransition()?

In React apps:

Some updates (like typing) are urgent
Others (like rendering a huge filtered list) are non-urgent
useTransition() lets you prioritize updates:
Keep fast things like input typing responsive
Delay heavy things like filtering, sorting, or rendering large data

Syntax

const [isPending, startTransition] = useTransition();

startTransition(callback) → Runs non-urgent updates
isPending → Boolean flag that’s true while the update is in progress

Simple Example: Search List

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

function FilteredList({ query }) {
const items = Array(20000)
.fill(0)
.map((_, i) => `Item ${i}`)
.filter(item => item.includes(query));

return items.map(item => <div key={item}>{item}</div>);
}

function App() {
const [input, setInput] = useState('');
const [search, setSearch] = useState('');
const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
const value = e.target.value;
setInput(value); // urgent

startTransition(() => {
setSearch(value); // non-urgent
});
};

return (
<>
<input
type="text"
value={input}
onChange={handleChange}
placeholder="Search..."
/>
{isPending && <p>Loading...</p>}
<FilteredList query={search} />
</>
);
}

The input stays responsive while filtering happens in the background.

Benefits of useTransition()

Feature	What it Does
startTransition()	Marks updates as low-priority
isPending	Indicates if the transition is still running
Prevents blocking	Keeps urgent UI (like typing) fast
Ideal for	Search filters, lazy loading, tab switches

Important Notes

It’s used for state updates only, not side effects
Doesn’t work with DOM operations like useLayoutEffect or ref access
Only available in React 18+

Summary

Hook	Description
useTransition()	Defers expensive state updates to keep UI responsive
startTransition()	Wraps slow update (e.g., filtering large data)
isPending	Shows loading or fallback state during that update