hardFrontend

What do `startTransition` and `useTransition` actually do under the hood?

Q: What do `startTransition` and `useTransition` actually do under the hood?

They mark a state update as a **non-urgent transition** so React can render it in an *interruptible, lower-priority* pass instead of blocking the main thread. Urgent updates (typing, clicks) can preempt an in-progress transition render, keeping input responsive while a heavy re-render happens in the background. urgent input preempts the low-priority transition render urgent <animate attributeName="fill-opacity" values="0.3;0.7;0.3" dur="1.2s" repeatCount="indefinite"

520 views

Understand the problem

Explain concurrent transitions and how they keep the UI responsive.

reactconcurrentperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Explore the playground snippets

Responsive filter over 8000 items

Run Playground

import { useState, useTransition } from 'react';

const ITEMS = Array.from({ length: 8000 }, (_, i) => 'Item ' + i);

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

  function onChange(e) {
    const q = e.target.value;
    setQuery(q);                                  // urgent: input stays snappy
    startTransition(() => {
      setList(ITEMS.filter((x) => x.includes(q))); // non-urgent: interruptible
    });
  }

  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <input value={query} onChange={onChange} placeholder="Filter 8000 items" />
      {isPending && <span style={{ marginLeft: 8, color: '#888' }}>updating…</span>}
      <p>{list.length} matches</p>
      <ul style={{ maxHeight: 160, overflow: 'auto' }}>
        {list.slice(0, 50).map((x) => <li key={x}>{x}</li>)}
      </ul>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What does the `use()` hook do, and why is it special?

When would you use `useLayoutEffect` instead of `useEffect`?