React 18

startTransition

Marca updates como não-urgentes para manter a UI responsiva durante cálculos pesados.

Definição

startTransition é uma API do React 18 (Concurrent) que marca atualizações de estado como não-urgentes. O React pode interromper essas atualizações se uma mais urgente chegar (ex: digitação), mantendo a UI responsiva.

Problema → Solução

Problema

Filtrar lista enorme ao digitar trava o input — o React processa tudo como urgente.

Solução

Envolver o update pesado em startTransition. O React pode interrompê-lo para priorizar a digitação.

Dica de entrevista

Tip

Urgente: digitação, cliques, animações. Não-urgente: filtros pesados, navegação de dados.

Código

import { startTransition, useState, useTransition } from 'react';

function Busca({ data }) {
  const [query, setQuery] = useState('');
  const [resultado, setResultado] = useState(data);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setQuery(e.target.value); // urgente

    startTransition(() => {
      setResultado(heavyFilter(data, e.target.value)); // não-urgente
    });
  };

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <Lista items={resultado} />
    </>
  );
}

Perguntas de entrevista

Q.Diferença entre startTransition e useTransition?▾

A.useTransition é o hook que retorna [isPending, startTransition]. O isPending permite mostrar feedback visual (spinner, opacity). startTransition (sem hook) é a função pura, usada quando você não precisa de feedback.

Q.startTransition substitui debounce?▾

A.Não totalmente. Debounce ATRASA a execução. startTransition EXECUTA imediatamente mas em prioridade baixa, podendo ser interrompido. Para network calls (API), debounce ainda é melhor. Para filtros locais pesados, startTransition é mais responsivo.

Q.Por que digitação não pode ser wrapped em startTransition?▾

A.Porque o usuário precisa ver o caractere imediatamente. Marcar como não-urgente faria a UI parecer travada. Inputs controlados sempre devem ser updates urgentes.

Termos relacionados

2/122← →