Réagissez aux nouvelles fonctionnalités - le crochet 'utiliser'

React 19 (version RC – à compter de septembre 2024) est la dernière version de la populaire bibliothèque de développement Web.
La V19 est une étape importante, apportant de nombreuses nouvelles fonctionnalités et hooks. Cet article discutera de l'un de ces hooks, le use hook.

Le crochet d'utilisation

Ce hook permet aux développeurs de suspendre le rendu d'un composant d'interface utilisateur jusqu'à ce qu'une tâche asynchrone, telle que la récupération de données ou le chargement de ressources, soit terminée en suspendant la promesse reçue, sans avoir besoin d'une gestion d'état complexe.

Exemple de récupération de données

Nous avons un composant simple qui utilise l'approche classique, le hook useEffect, et récupère les données d'une API fictive (j'utilise MSW).
Nous gérons un état local pour stocker les données, ainsi que les états de récupération isLoading et isError :

const [users, setUsers] = useState<any>(null);
const [isError, setIsError] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true);
</boolean></boolean></any>

Lorsque la page se charge pour la première fois, nous exécutons ce hook useEffect pour récupérer les données, les stocker et mettre à jour les différents états :

const fetchData = async () => {
  const response = await fetch('/api/users');
  return response.json();
};


useEffect(() => {
  fetchData()
    .then(setUsers)
    .catch(() => setIsError(true))
    .finally(() => setIsLoading(false));
}, []);

Nous affichons une interface utilisateur pendant le traitement de la demande ou si nous rencontrons une erreur :

if (isLoading) {
  return <h2 id="Loading">Loading...</h2>;
}
if (isError) {
  return <h2 id="Error">Error</h2>;
}

et enfin ! Nous rendons la liste des utilisateurs :

return ( 
  
    {users.map((user) => {
      return (
        <div>
          {user.lastName}, {user.firstName}
        </div>
      );
    })}
  >
);

Beaucoup de code passe-partout !

Maintenant, refactorisons !

Supprimons les hooks useState et useEffect. Nous conserverons la méthode fetchData telle quelle.
Nous allons maintenant récupérer les données à l'aide du nouveau hook use, qui prend une promesse et renvoie soit des données JSON, soit une erreur :

const users = use(fetchData());

La façon dont ce crochet fonctionne est similaire à quelque chose comme ceci :

const users = await fetchData();

Gestion de isLoading et isError

Pour gérer ces changements d'état, nous allons accéder à notre composant App. Nous utiliserons le composant React Suspense, conçu pour répondre aux événements asynchrones. Il affiche une interface utilisateur de secours jusqu'à ce que ses enfants aient fini de se charger.

Pour la gestion des erreurs lorsque vous travaillez avec Suspense, il est courant d'utiliser un ErrorBoundary. Nous ajouterons un composant ErrorBoundary qui implémente la méthode getDerivedStateFromError() de React.

<errorboundary fallback="{<h2">Error}>
  <suspense fallback="{<h2">Loading...}>
    <userlist></userlist>
  </suspense>
</errorboundary>

Quelques extras

Les règles habituelles pour les crochets ne s'appliquent pas ici — vous pouvez utiliser ce crochet partout où vous le souhaitez !

Contrairement aux hooks classiques, le hook use peut être utilisé conditionnellement avec une instruction if, vous permettant de décider de le déclencher ou non. Par exemple, si vous souhaitez envelopper une nouvelle requête API avec un indicateur de fonctionnalité et l'activer pour le test, transmettez simplement l'indicateur de fonctionnalité au composant UserList et enveloppez le hook d'utilisation. C'est aussi simple que ça !

Maintenant, modifiez le composant App :

<errorboundary fallback="{<h2">Error}>
  <suspense fallback="{<h2">Loading...}>
    <userlist testnewapi="{true}"></userlist>
  </suspense>
</errorboundary>

Modifiez le composant UserList :

let users = [];
if(testNewApi){
  user = use(fetchData());
}

Vous pouvez également utiliser ce hook pour obtenir un objet Context, plutôt que d'utiliser la méthode habituelle :

const data = useContext(myContext);

Vous pouvez utiliser le hook use ici, par exemple, si vous souhaitez récupérer le contexte en fonction d'une instruction conditionnelle.

Conclusion

Dans cet article, j'ai décrit la syntaxe du hook d'utilisation et fourni des exemples d'utilisation. Cela devrait vous aider à comprendre ces crochets et à les mettre en œuvre efficacement. J'espère que vous trouverez ces informations utiles pour vos futurs projets.

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!