What are concurrent features like useTransition and useDeferredValue?

Question

Accepted Answer

Concurrent React can **interrupt, pause, and prioritize** rendering work. You mark some updates as **non-urgent transitions** so urgent updates (like typing) stay responsive even while a heavy re-render is pending.

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // URGENT: keep the input snappy
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // NON-URGENT: can be interrupted
  });
}
// isPending lets you show a subtle "updating…" indicator
```

**Why this helps:** filtering a huge list is expensive. Without a transition, React would block the input while re-rendering thousands of rows, so typing feels laggy. By wrapping the expensive update in `startTransition`, React keeps the input updates high-priority and can **throw away** an in-progress filter render if you type another key — no stale, janky frames.

## useDeferredValue

A simpler alternative when you don't control the setter — it gives you a "lagging" copy of a value:

```jsx
const deferredQuery = useDeferredValue(query); // updates after urgent work settles
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## When to use

Use these for **expensive, non-urgent UI updates** driven by fast user input: search-as-you-type over large datasets, tab switches that render heavy content, big filtered/sorted tables. For simple apps they're unnecessary — they shine when a render is heavy enough to cause visible input lag.