Como usar useTransition no React para evitar

O clássico método com isLoading

Se você já desenvolveu interfaces com React, é muito provável que tenha criado uma variável de estado do tipo <code>isLoading</code> para controlar o momento entre o início da requisição e a chegada da resposta. O padrão é: definir o loading como true, mostrar um spinner, aguardar a resposta e então trocar para false.

Embora funcione, esse padrão exige mais código, reduz clareza e está sujeito a erros se esquecermos de resetar o estado corretamente.

O que é o hook useTransition?

<code>useTransition</code> é um hook do React que permite diferenciar atualizações de alta prioridade (interações diretas) de atualizações mais lentas (como carregamentos de dados). Ele retorna dois elementos:

Como aplicar na prática

Com o <code>startTransition</code> , podemos envolver qualquer função assíncrona e monitorar o estado de carregamento através de <code>isPending</code> . Isso elimina a necessidade de gerenciar <code>setIsLoading</code> manualmente.

Comparando as abordagens

Dicas extras de ferramentas