Post 1 — Loading sem dor usando startTransition no React

Loading sem dor usando startTransition

Já aconteceu isso?

Você clica num botão. A interface congela. O loading aparece tarde. E parece que o browser decidiu tirar férias.

Pois é.

Muita gente adiciona loading no React mudando vários estados ao mesmo tempo e acaba bloqueando a UI sem perceber.

Mas existe uma forma muito mais suave de fazer isso usando startTransition.

O problema

Imagina um filtro pesado ou uma pesquisa grande:

const [loading, setLoading] = useState(false);
const [items, setItems] = useState([]);
 
const handleSearch = async () => {
  setLoading(true);
 
  const data = await fetchItems();
 
  setItems(data);
  setLoading(false);
};

Funciona?

Sim.

Mas dependendo da quantidade de renderizações, a interface pode ficar estranha.

A solução com startTransition

O React permite marcar updates como menos importantes.

É exatamente isso que startTransition faz.

import { startTransition, useState } from 'react';
 
const [loading, setLoading] = useState(false);
const [items, setItems] = useState([]);
 
const handleSearch = async () => {
  setLoading(true);
 
  const data = await fetchItems();
 
  startTransition(() => {
    setItems(data);
  });
 
  setLoading(false);
};

Agora o React entende:

“Ok… atualizar a lista inteira pode esperar um pouco.”

Enquanto isso:

• botão continua responsivo
• loading aparece mais rápido
• animações continuam suaves
• UI fica mais natural

Quando usar?

startTransition funciona muito bem para:

• filtros
• pesquisas
• tabelas
• dashboards
• listas grandes
• tabs
• navegação pesada

Basicamente:

Qualquer update que não precise acontecer instantaneamente.

Exemplo mais real

const [isPending, startTransition] = useTransition();
 
const handleFilter = (value: string) => {
  startTransition(() => {
    setFilter(value);
  });
};

E agora você ainda ganha o isPending:

{
  isPending && <Loader />;
}

Simples. Limpo. Sem hacks.

Resultado

Pequenas mudanças deixam aplicações MUITO mais profissionais.

Muita gente pensa que performance é só backend.

Mas uma interface fluida muda completamente a sensação do produto.

E às vezes tudo começa com uma linha:

startTransition(() => {
  // update
});

Final

O React já entrega ferramentas absurdamente boas.

O segredo é começar a usar as certas nos lugares certos.

Se você nunca usou startTransition, esse é um ótimo momento.