Comment utiliser le hook useTransition pour améliorer les performances dans React

React est une bibliothèque JavaScript populaire pour créer des interfaces utilisateur. Il est connu pour son efficacité et se concentre sur la création de composants d’interface utilisateur réutilisables. l'une des fonctionnalités clés de React est l'introduction de hooks qui sont des fonctions qui s'accrochent à l'état React. l'un de ces hooks est le hook useTransition. Ce hook permet au changement d'état de se produire sans bloquer l'interface, ce qui se traduit par une expérience fluide.

Comprendre le crochet useTransition

Pour mieux comprendre le hook useTransition, nous examinerons l'exemple suivant.

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(
    <div>
      {post !== undefined && (
      <div className="post-card">
        <h2>{post?.title}</h2>
        <image src={post?.image} />
        <p>{post?.content}</p>
      </div>
      )}
      <button onClick={fetchData}>
        Get post
      </button>
    </div>
  )
}

export default App; 

Lorsque vous cliquez sur le bouton, en fonction de la lenteur d'Internet ou de la lourdeur de la tâche exécutée dans la fonction fetchData, l'interface utilisateur peut se bloquer pendant la tâche de récupération, ce qui entraînera une mauvaise expérience utilisateur. il y a également la possibilité que l'utilisateur envoie du spam sur le bouton au cas où vous ne voudriez pas que l'utilisateur abuse de votre application. De plus, l'application ne montre à l'utilisateur aucune indication indiquant qu'il s'agit d'une opération en cours.

Ces problèmes peuvent facilement être résolus à l'aide du hook useTransition, nous pouvons mettre à jour le code précédent en quelque chose comme ceci.

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(
    <div>
      {post !== undefined && (
      <div className="post-card">
        <h2>{post.title}</h2>
        <image src={post.image} />
        <p>{post.content}</p>
      </div>
      )}
      <button
        disabled={pending} 
        onClick={fetchData}>
        {pending ? <ImSpinner2 className="animate-spin" /> : "Get post" }
      </button>
    </div>
  )
}

export default App; 

Le hook useTransition invoqué renvoie deux valeurs : en attendant quelle valeur sera vraie si la tâche est exécutée et la fonction startTransition contient la tâche qui peut être interrompue par des tâches plus urgentes.

Dans l'exemple ci-dessus, nous avons enveloppé la requête d'extraction dans une fonction de flèche asynchrone qui se trouve à l'intérieur de la fonction startTransition.

et dans le bouton, nous le modifions de manière à inclure un attribut désactivé lié à l'attente et nous avons changé l'étiquette du bouton pour afficher une flèche lorsque la tâche est en attente et afficher l'étiquette « Obtenir la publication » lorsque le la tâche n'est pas en attente.

Cela se traduit par une expérience utilisateur fluide, offre de meilleures performances et sécurise votre application contre les mauvais comportements des utilisateurs.

Conclusion

Le hook useTransition change la donne pour créer une application React performante avec une expérience utilisateur fluide. Il garantit que l'interface utilisateur reste réactive lors d'opérations potentiellement lentes et empêche le gel de l'interface utilisateur, ce qui améliore l'expérience utilisateur globale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!