Skip to main content

useTransition

O useTransition é um hook do React que ajuda a lidar com atualizações de estado que podem ser pesadas ou demoradas, permitindo marcar certas atualizações como não urgentes. Isso melhora a experiência do usuário, porque a interface continua responsiva enquanto a atualização acontece em segundo plano. O hook não recebe parâmetros e retorna um array com duas posições, sendo:

  • A flag isPending que informa se a transição (transition) está pendente ou não.
  • A função startTransition que permite marcar a atualização da transição (transition).
Exemplo react.dev
import { useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  // ...
}

Para ilustrar, vamos imaginar o cenário de uma cervejaria online, onde o usuário pode buscar e filtrar cervejas pelo nome, tipo ou teor alcoólico.

Exemplo prático — Catálogo de Cervejas 🍺​

Imagine que você tenha um catálogo enorme de cervejas artesanais. Ao buscar ou filtrar as cervejas, renderizar a lista inteira pode ser lento, especialmente se houver milhares de opções. Com useTransition, podemos marcar a atualização da lista como não urgente, para que a digitação no campo de busca continue fluida, mesmo com a atualização da lista acontecendo em segundo plano.

Live Editor
// Comentei a linha abaixo porque gera erro na importação utilizando o LIVE EDITOR. Para um caso real considere a importação.
// import React, { useState, useTransition } from 'react';

const beers = Array.from({ length: 30 }, (_, i) => ({
  id: i,
  name: `Cerveja ${i + 1}`,
  type: i % 2 === 0 ? 'Lager' : 'IPA',
  abv: (Math.random() * 10).toFixed(2),
}));

function BreweryApp() {
  const [query, setQuery] = useState('');
  const [filteredBeers, setFilteredBeers] = useState(beers);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (e) => {
    const value = e.target.value;
    setQuery(value);

    startTransition(() => {
      const filtered = beers.filter((beer) =>
        beer.name.toLowerCase().includes(value.toLowerCase())
      );
      setFilteredBeers(filtered);
    });
  };

  return (
    <div>
      <h2>Catálogo de Cervejas 🍻</h2>
      <input
        type="text"
        value={query}
        onChange={handleSearch}
        placeholder="Busque uma cerveja..."
      />
      {isPending && <p>Carregando cervejas...</p>}
      <ul>
        {filteredBeers.map((beer) => (
          <li key={beer.id}>
            {beer.name} — {beer.type} ({beer.abv}% ABV)
          </li>
        ))}
      </ul>
    </div>
  );
}

// Este render é somente para que o Code Editor funcione. Não use em uma aplicação real.
render(BreweryApp);
Result
Loading...

Neste exemplo, a lista de cervejas tem 30 (mas pense em uma lista com 10k) itens. Se tentarmos filtrar a lista diretamente a cada tecla pressionada, a interface pode travar, especialmente em dispositivos mais lentos. O useTransition resolve isso permitindo que você marque a atualização da lista como uma transição, ou seja, uma atualização não urgente.

A função startTransition envolve a atualização do estado da lista. Isso diz ao React que essa atualização pode ser adiada se houver tarefas mais prioritárias, como manter a digitação do usuário fluída. Enquanto a lista é atualizada, a variável ``isPending` fica como true, permitindo exibir uma mensagem de carregamento para informar o usuário.

Benefícios do useTransition em uma cervejaria online​

Usar useTransition em uma aplicação como essa melhora a experiência do usuário. A busca continua rápida, mesmo com uma lista enorme sendo atualizada em segundo plano. Isso é especialmente útil em catálogos extensos, dashboards complexos ou qualquer interface que lide com grandes volumes de dados.

Além disso, o React prioriza a interação do usuário. Mesmo que a atualização da lista demore, o campo de busca continua responsivo, evitando aquela sensação frustrante de clicar ou digitar e nada acontecer.

Limitações do useTransition​

Embora o useTransition seja poderoso, ele não é uma solução mágica para todos os problemas de desempenho. Se a operação for muito pesada, ela ainda vai impactar o desempenho geral — só que de forma mais controlada. Nesses casos, combinar o useTransition com técnicas como memoização, virtualização de lista ou até dividir a lista em páginas pode ser a melhor abordagem.

Conclusão​

O useTransition é um hook essencial para melhorar a experiência do usuário em interfaces complexas. No exemplo da cervejaria, ele permite buscar e filtrar milhares de cervejas sem travar a interface, garantindo que a digitação e a interação continuem suaves. Isso torna a aplicação mais fluida e responsiva, mesmo lidando com grandes volumes de dados.

Se você está construindo uma aplicação que precisa lidar com atualizações pesadas, como filtragem de catálogos, visualização de tabelas ou renderização de gráficos complexos, o useTransition é uma ferramenta que vale a pena ter no seu arsenal React.

tip

Conheça mais sobre os hooks em:

Referências:​