useDeferredValue: Deferring What You Don't Control

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

1

Exercise 1 of 1

Defer a Received Value with useDeferredValue

When you receive a prop that triggers expensive downstream work, useDeferredValue keeps the UI responsive without touching the setter.

FilteredList — no deferred value

Search (parent owns state)

FilteredList renders: 1

Query: “” → 600 results

  • Item 1 — alpha 0
  • Item 2 — beta 1
  • Item 3 — gamma 2
  • Item 4 — delta 3
  • …and 596 more

Every keystroke re-runs the expensive filter immediately — even if the user is still mid-word.

✦

Test Your Understanding

Multiple choice — select an answer to see the explanation.

1 / 4

When should you prefer useDeferredValue over useTransition?

Re-read the lectureAll lectures →