O que são recursos concorrentes como useTransition e useDeferredValue?

Question

Accepted Answer

O React Concurrent pode **interromper, pausar e priorizar** o trabalho de renderização. Você marca algumas atualizações como **transições não urgentes** para que atualizações urgentes (como digitação) permaneçam responsivas mesmo enquanto uma re-renderização pesada está pendente.

## 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
```

**Por que isso importa:** filtrar uma lista gigante é caro. Sem uma transição, React bloquearia a entrada enquanto renderiza novamente milhares de linhas, então a digitação parece lenta. Envolvendo a atualização cara em `startTransition`, React mantém as atualizações de entrada com alta prioridade e pode **descartar** uma renderização de filtro em andamento se você digitar outra tecla — sem frames antigos e travados.

## useDeferredValue

Uma alternativa mais simples quando você não controla o setter — ela lhe dá uma cópia "atrasada" de um valor:

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

## Por que isso importa

Use estes para **atualizações caras e não urgentes da UI** impulsionadas por entrada rápida do usuário: pesquisa conforme você digita em grandes conjuntos de dados, mudanças de abas que renderizam conteúdo pesado, tabelas grandes filtradas/classificadas. Para aplicativos simples são desnecessários — eles brilham quando uma renderização é pesada o suficiente para causar atraso de entrada visível.