useTransition: Keeping React Responsive During Expensive State Updates

Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.

1

Exercise 1 of 2

useTransition Quiz

Four questions on useTransition — urgent vs deferred updates, isPending semantics, what startTransition does NOT do, and when to reach for it.

1
const [isPending, startTransition] = useTransition();

function handleSearch(e) {
  const val = e.target.value;
  setInputValue(val);          // line A

  startTransition(() => {
    setFilteredList(            // line B
      bigList.filter(item => item.includes(val))
    );
  });
}

Which update is urgent and which is deferred?

2

What does isPending === true mean?

3

What does startTransition NOT do?

4

useTransition is most appropriate when…

0/4 answered

2

Exercise 2 of 2

Fix Input Lag with useTransition

Live editor: a search input lags because every keystroke triggers an expensive list render. Add useTransition to decouple input responsiveness from list rendering.

Task

The input lags — every keystroke triggers a 50ms render of SlowList. Type quickly and feel the delay.

Fix it with useTransition:

  1. Split into two state values: inputValue (urgent) and query (deferred)
  2. Update inputValue immediately — this keeps the input responsive
  3. Wrap the setQuery call in startTransition
  4. Use isPending to show a "Filtering…" message
Loading editor…
Re-read the lectureAll lectures →
Practice: useTransition: Keeping React Responsive During Expensive State Updates — Interactive Exercises | Durgesh Rai