React es una biblioteca de JavaScript popular para crear interfaces de usuario. Es conocido por su eficiencia y su enfoque en la creación de componentes de interfaz de usuario reutilizables. Una de las características clave de React es la introducción de ganchos, que son funciones que se conectan al estado de React. Uno de esos ganchos es el gancho useTransition. Este enlace permite que se produzca el cambio de estado sin bloquear la interfaz, lo que da como resultado una experiencia fluida.

Comprender el uso del gancho de transición

Para comprender mejor el gancho useTransition, veremos el siguiente ejemplo.

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; 

cuando el uso hace clic en el botón dependiendo de qué tan lento sea Internet o qué tan pesada sea la tarea ejecutada dentro de la función fetchData, la interfaz de usuario puede congelarse durante la tarea de búsqueda, lo que resultará en una mala experiencia del usuario. También existe la posibilidad de que el usuario envíe spam al botón en caso de que no desee que el usuario abuse de su aplicación. Además, la aplicación no muestra al usuario ninguna indicación de que hay una operación en proceso.

Esos problemas se pueden solucionar fácilmente usando el gancho useTransition, podemos actualizar el código anterior a algo como esto.

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; 

El gancho useTransition invocado devuelve dos valores: pendiente de qué valor será verdadero si la tarea se ejecuta y la función startTransition contiene la tarea que puede ser interrumpida por tareas más urgentes.

En el ejemplo anterior, envolvimos la solicitud de recuperación junto a una función de flecha asincrónica que está dentro de la función startTransition.

y en el botón lo modificamos de tal manera que incluye atributos deshabilitados que están vinculados a pendientes y cambiamos la etiqueta del botón para mostrar una rueda giratoria cuando la tarea está pendiente y mostrar la etiqueta "Obtener publicación" cuando la tarea está pendiente. la tarea no está pendiente.

Esto da como resultado una experiencia de usuario fluida, proporciona un mejor rendimiento y protege su aplicación contra el mal comportamiento del usuario.

Conclusión

El gancho useTransition cambia las reglas del juego para crear una aplicación React de alto rendimiento con una experiencia de usuario fluida. Garantiza que la interfaz de usuario siga respondiendo durante operaciones potencialmente lentas y evita que la interfaz de usuario se congele, lo que mejora la experiencia general del usuario.