What is useTransition in React: Simple Explanation and Example

useTransition is a React hook that helps you mark some state updates as "transitions" to keep the UI responsive during slow updates. It lets React delay less urgent updates while keeping urgent ones fast, improving user experience.

How It Works

Imagine you are cooking a meal and answering a phone call at the same time. You want to answer the call quickly (urgent task) but can finish cooking later (less urgent task). useTransition works similarly by letting React know which updates are urgent and which can wait.

When you use useTransition, React keeps the UI responsive by showing immediate changes right away and delaying the slower updates. This prevents the app from freezing or feeling slow during big updates.

It returns a pair: a boolean that tells if a transition is pending, and a function to start the transition. You wrap the less urgent state changes inside this function.

Example

This example shows a search input that updates a list. The input updates immediately, but filtering the list is marked as a transition to keep typing smooth.

react

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

const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

export default function SearchList() {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    const value = e.target.value;
    setQuery(value); // urgent update

    startTransition(() => {
      // less urgent update
      const filtered = items.filter(item => item.toLowerCase().includes(value.toLowerCase()));
      setFilteredItems(filtered);
    });
  }

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="Search items..."
        aria-label="Search items"
      />
      {isPending && <p>Loading results...</p>}
      <ul>
        {filteredItems.slice(0, 20).map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Output

A text input labeled 'Search items' with a list below showing up to 20 filtered items. While filtering, a 'Loading results...' message appears briefly.

When to Use

Use useTransition when you have updates that take time and can make the UI feel slow or frozen. For example:

• Filtering large lists while typing
• Loading new content after user input
• Switching views or tabs with heavy rendering

This hook helps keep the app feeling fast by letting urgent updates happen immediately and delaying less urgent ones.

Key Points

• useTransition separates urgent and non-urgent updates.
• It returns a boolean isPending and a function startTransition.
• Wrap slow updates inside startTransition to keep UI responsive.
• Helps avoid UI freezes during heavy rendering or data filtering.
• Works well for improving user experience in interactive apps.

Key Takeaways

useTransition helps keep React apps responsive by marking some updates as non-urgent.

Wrap slow state updates inside startTransition to delay them without blocking the UI.

Use the isPending boolean to show loading indicators during transitions.

Ideal for filtering large lists, loading data, or heavy UI changes triggered by user input.

Improves user experience by preventing UI freezes during complex updates.