Concurrent React Patterns

useTransition

Wrap expensive state updates in startTransition to mark them as non-urgent. React keeps the current UI interactive while preparing the next render in the background.

const [isPending, startTransition] = useTransition()

function handleSearch(value: string) {
  startTransition(() => {
    setResults(filterData(value))
  })
}

useDeferredValue

Defer re-rendering a slow component tree until the main thread is idle. Ideal for search results, large lists, or chart updates driven by fast-changing input.

const deferredQuery = useDeferredValue(query)
const suggestions = useMemo(() => {
  return search(deferredQuery)
}, [deferredQuery])

Suspense for Data

Combine React Server Components with <Suspense> boundaries to stream content as it becomes ready. Users see meaningful UI immediately instead of a blank loading screen.

<Suspense fallback={<Skeleton />}>
  <AsyncDashboard />
</Suspense>

Priority Queuing

React's internal lane model assigns priorities to updates. User interactions (clicks, keystrokes) always preempt background renders. Structure your state so high-priority updates never block on low-priority work.