React › Concurrent Hooks (useTransition, useDeferredValue & useLayoutEffect)

What is a simple real world example of when useTransition would make an app feel faster?

Beginner

Answer

Imagine typing into a search box that filters a list of ten thousand items on every keystroke. Without useTransition, each keystroke might feel slightly delayed because the browser is busy filtering the huge list. Wrapping the filtering update in useTransition tells React that typing feedback is more important, so the input stays smooth while the filtering catches up right after.

const [isPending, startTransition] = useTransition();

function handleSearch(value) {
  setSearchText(value); // updates instantly, feels smooth
  startTransition(() => {
    setFilteredItems(searchItems(value)); // allowed to happen slightly later
  });
}

Real-world example A large contact list app keeps the search box feeling instantly responsive even while searching through thousands of contacts, thanks to marking the search results update as a transition.

Common follow-ups: What visual feedback, like a loading indicator, should you show while isPending is true?;Is useTransition needed for every state update, or only for genuinely slow ones?

Performance (memo/useMemo);Hooks