React › Concurrent Hooks (useTransition, useDeferredValue & useLayoutEffect)

When should you choose useTransition over useDeferredValue, given they solve a similar kind of problem?

Advanced

Answer

Use useTransition when you control the actual state update that is slow, since it lets you wrap that specific update in startTransition. Use useDeferredValue when you receive a value from somewhere else, such as a prop, and cannot wrap the original update yourself, but still want to delay how quickly your own component reacts to that value changing.

// useTransition, you control the update
startTransition(() => setResults(filterList(query)));

// useDeferredValue, you only receive the value as a prop
function List({ query }) {
  const deferredQuery = useDeferredValue(query);
  // ...
}

Real-world example A dashboard component receives a filter value as a prop from its parent and cannot change how the parent updates that value, so it uses useDeferredValue internally instead of useTransition to smooth out its own rendering.

Common follow-ups: Can useTransition and useDeferredValue be used together in the same component?;What actually happens under the hood that makes these updates lower priority?

Performance (memo/useMemo);Suspense & Concurrent Rendering