useTransition for Expensive Updates

Keep the UI Alive During Heavy Renders

Picture this: you have a tab panel, each tab renders a complex visualization with 1,000 data points. You click a tab and... nothing. The whole UI freezes for 300ms while React grinds through the new content. Your cursor won't blink. Your scroll is dead. The user thinks your app is broken.

useTransition fixes this. The tab indicator switches instantly, the old content stays visible (optionally dimmed), and the new content renders in the background.

function TabPanel() {
  const [activeTab, setActiveTab] = useState('overview');
  const [isPending, startTransition] = useTransition();

  function handleTabClick(tab) {
    startTransition(() => {
      setActiveTab(tab);
    });
  }

  return (
    <>
      <TabBar active={activeTab} onChange={handleTabClick} />
      <div style={{ opacity: isPending ? 0.7 : 1, transition: 'opacity 150ms' }}>
        <TabContent tab={activeTab} />
      </div>
    </>
  );
}

The Mental Model

When to Use useTransition

Not every state update needs a transition. Use it when ALL of these are true:

1. A state update triggers an expensive render (many components, heavy computation)
2. Showing stale content temporarily is acceptable (tab content, search results, filtered lists)
3. User needs immediate feedback that their action was received (tab highlight, loading indicator)

// GOOD: Search results can show stale data while new results render
function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleSearch(value) {
    setQuery(value);  // Sync: input updates immediately
    startTransition(() => {
      setResults(filterProducts(value));  // Transition: renders in background
    });
  }

  return (
    <>
      <input value={query} onChange={e => handleSearch(e.target.value)} />
      {isPending && <LoadingBar />}
      <ResultList items={results} />
    </>
  );
}

// BAD: Form submission result can't show stale data
function LoginForm() {
  const [status, setStatus] = useState('idle');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit() {
    // Don't use transition here — the user needs to know
    // immediately whether login succeeded or failed
    setStatus('loading');
    const result = await login(credentials);
    setStatus(result.success ? 'success' : 'error');
  }
}

Practical Patterns

Pattern 1: Filtered List

function ProductCatalog({ products }) {
  const [category, setCategory] = useState('all');
  const [isPending, startTransition] = useTransition();

  const filtered = products.filter(p =>
    category === 'all' || p.category === category
  );

  return (
    <>
      <CategoryFilter
        active={category}
        onChange={(cat) => {
          startTransition(() => setCategory(cat));
        }}
      />
      <div className={isPending ? 'opacity-60' : ''}>
        {filtered.map(p => <ProductCard key={p.id} product={p} />)}
      </div>
    </>
  );
}

Pattern 2: Slow Navigation

function App() {
  const [page, setPage] = useState('/');
  const [isPending, startTransition] = useTransition();

  function navigate(path) {
    startTransition(() => setPage(path));
  }

  return (
    <>
      <Nav current={page} onNavigate={navigate} isPending={isPending} />
      <Suspense fallback={<PageSkeleton />}>
        <div className={isPending ? 'opacity-60 pointer-events-none' : ''}>
          <PageContent path={page} />
        </div>
      </Suspense>
    </>
  );
}

The navigation link highlights immediately. The old page content dims but stays visible. The new page renders in the background. User can click a different link to redirect.

Production Scenario: The Map with 10,000 Markers

This is the kind of problem where useTransition really shines. A real estate app renders 10,000 property markers on a map. When the user drags the price filter slider, all markers need to update:

function PropertyMap() {
  const [priceRange, setPriceRange] = useState([0, 1000000]);
  const [isPending, startTransition] = useTransition();

  const markers = properties.filter(
    p => p.price >= priceRange[0] && p.price <= priceRange[1]
  );

  return (
    <>
      <PriceSlider
        value={priceRange}
        onChange={(range) => {
          startTransition(() => setPriceRange(range));
        }}
      />
      <div style={{ opacity: isPending ? 0.5 : 1 }}>
        <Map>
          {markers.map(m => <Marker key={m.id} property={m} />)}
        </Map>
      </div>
    </>
  );
}

Without transition: dragging the price slider freezes the map. Each slider position change blocks for 200ms. The slider feels stuck.

With transition: the slider moves fluidly (each slider change interrupts the previous transition). The map shows old markers dimmed while new markers render. The UI never freezes because React yields between marker renders.

Common Mistakes

Challenge

Challenge: Add transitions to a dashboard

// This dashboard freezes for 500ms when switching
// between different time ranges. The date picker
// doesn't respond to subsequent clicks until the
// current render completes.

function AnalyticsDashboard() {
  const [timeRange, setTimeRange] = useState('7d');
  const data = useAnalyticsData(timeRange);

  return (
    <div>
      <DateRangePicker
        value=`{timeRange}`
        onChange=`{setTimeRange}`
      />
      <MetricsGrid data={data} />
      <ChartSection data={data} />
      <TableSection data={data} />
    </div>
  );
}

// Make this dashboard responsive during time range changes.
// Requirements:
// 1. Date picker responds immediately
// 2. Dashboard dims during transition
// 3. Rapid clicks discard in-progress renders

function AnalyticsDashboard() {
  const [timeRange, setTimeRange] = useState('7d');
  const [isPending, startTransition] = useTransition();
  const data = useAnalyticsData(timeRange);

  function handleRangeChange(range) {
    startTransition(() => {
      setTimeRange(range);
    });
  }

  return (
    <div>
      <DateRangePicker
        value={timeRange}
        onChange={handleRangeChange}
      />
      {isPending && <ProgressBar />}
      <div
        style={{
          opacity: isPending ? 0.6 : 1,
          transition: 'opacity 200ms',
          pointerEvents: isPending ? 'none' : 'auto',
        }}
      >
        <MetricsGrid data={data} />
        <ChartSection data={data} />
        <TableSection data={data} />
      </div>
    </div>
  );
}

Quiz

Key Rules