React é uma biblioteca JavaScript popular para construir interfaces de usuário. É conhecido pela eficiência e foco na criação de componentes de UI reutilizáveis. um dos principais recursos do React é a introdução de ganchos que são funções que se conectam ao estado React. um desses ganchos é o gancho useTransition. Este gancho permite que a mudança de estado aconteça sem bloquear a interface, o que resulta em uma experiência tranquila.

Compreendendo o gancho useTransition

Para entender melhor o gancho useTransition, examinaremos o exemplo a seguir.

import {useState} from "react"

const App = () => {
  const [post, setPost] = useState(undefined)

  const fetchData = async () => {
    await fetch("https://jsonplaceholder.org/posts/1")
      .then((result) => result.json())
      .then((result) => setPost(result))
  }

  return(
    

      {post !== undefined && (
      

        
{post?.title}
        
{post?.content}
      
      )}
      
        Get post
      
    
  )
}

export default App; 

quando o uso clica no botão, dependendo de quão lenta é a Internet ou quão pesada é a tarefa executada dentro da função fetchData, a IU pode congelar durante a tarefa de busca, o que resultará em uma experiência ruim do usuário. também existe a possibilidade de o usuário enviar spam para o botão caso você não queira que o usuário abuse do seu aplicativo. Além disso, o aplicativo não mostra ao usuário nenhuma indicação de que se trata de uma operação em andamento.

Esses problemas podem ser facilmente corrigidos usando o gancho useTransition, podemos atualizar o código anterior para algo assim.

import {useState, useTransition} from "react"
import {ImSpinner2} from "react-icons/im"

const App = () => {
  const [pending, startTransition] = useTransition()
  const [post, setPost] = useState({})

  const fetchData = () => {
    startTransition( async () => {
      await fetch("https://jsonplaceholder.org/posts/1")
        .then((result) => result.json())
        .then((result) => setPost(result))
    })
  }

  return(
    

      {post !== undefined && (
      

        
{post.title}
        
{post.content}
      
      )}
      
        {pending ?  : "Get post" }
      
    
  )
}

export default App; 

O gancho useTransition invocado retorna dois valores: pendente cujo valor será verdadeiro se a tarefa for executada e a função startTransition contém a tarefa que pode ser interrompida por tarefas mais urgentes.

No exemplo acima, agrupamos a solicitação de busca ao lado de uma função de seta assíncrona que está dentro da função startTransition.

e no botão modificamos de forma que inclua atributos desabilitados que estão vinculados a pendente e alteramos o rótulo do botão para mostrar um spinner quando a tarefa estiver pendente e mostrar o rótulo “Obter postagem” quando o a tarefa não está pendente.

Isso resulta em uma experiência de usuário tranquila e fornece um melhor desempenho e protege seu aplicativo contra mau comportamento do usuário.

Conclusão

O gancho useTransition é uma virada de jogo para a construção de aplicativos React de alto desempenho com uma experiência de usuário tranquila. Ele garante que a IU permaneça responsiva durante operações potencialmente lentas e evita o congelamento da IU, o que melhora a experiência geral do usuário.