En mars 2022, l'équipe React a annoncé la sortie officielle de React 18. Cette version comportait une foule de nouvelles fonctionnalités axées sur l'amélioration des performances, basées sur le concept de « rendu simultané ». L'idée derrière le rendu simultané est de rendre le processus de rendu vers le DOM interruptible.
Parmi les nouvelles fonctionnalités figurent cinq crochets: useId, useTransition, useDerredValue, useSyncExternalStore et useInsertionEffect.
Réagir useTransition Hook
Par défaut, toutes les mises à jour d'état React sont urgentes. Différentes mises à jour d'état dans votre application se disputent les mêmes ressources, ce qui la ralentit. La transition d'utilisation Crochet de réaction résout ce problème en vous permettant de marquer certaines mises à jour d'état comme non urgentes. Cela permet aux mises à jour d'état urgentes d'interrompre celles dont la priorité est inférieure.
Le composant SearchPage
Ce programme simple imite un moteur de recherche qui met à jour deux états: un champ de saisie et certains résultats de recherche.
importer { useState } de "réagir";
fonctionPage de recherche() {
const [entrée, setInput] = useState("")
constante [liste, setList] = useState([]);constante listSize = 30000
fonctionhandleChange(e) {
setInput(e.cible.évaluer);
constante listItems = [] ;pour (laisser je = 0; je < listeTaille; je++){
listItems.pousser(e.cible.évaluer);
}setList (listItems);
}revenir (
<div>
<étiquette>Rechercher sur le Web: </label>
<type d'entrée="texte" value={input} onChange={handleChange} />
{liste.map((item, index) => {
revenir <clé div={index}>{Objet}</div>
})}
</div>
);
}
exporterdéfaut RecherchePage ;
Le composant d'application mis à jour
importer Page de recherche de "./Composants/PageRecherche" ;fonctionApplication() {
revenir (
<div>
< Page de recherche/>
</div>
);
}
exporterdéfaut application ;
Le code ci-dessus affiche une application React avec un champ de saisie :
Lorsque vous commencez à saisir des caractères dans le champ, 30 000 copies du texte saisi s'affichent ci-dessous :
Si vous tapez plusieurs caractères en succession rapide, vous devriez repérer un délai. Cela affecte le temps que prennent les caractères pour apparaître à la fois dans le champ de saisie et dans la « zone de résultat de la recherche ». En effet, React exécute les deux mises à jour d'état en même temps.
Si la démo s'exécute trop lentement ou trop rapidement pour vous, essayez d'ajuster le listeTaille valeur en conséquence.
L'insertion du crochet useTransition dans l'application vous permettra de donner la priorité à une mise à jour d'état par rapport à l'autre.
Utilisation du crochet useTransition
importer {useState, useTransition} de "réagir";fonctionPage de recherche() {
constante [isPending, startTransition] = useTransition();
const [entrée, setInput] = useState("")
constante [liste, setList] = useState([]);constante listSize = 30000
fonctionhandleChange(e) {
setInput(e.cible.évaluer);
startTransition(() => {
constante listItems = [] ;pour (laisser je = 0; je < listeTaille; je++){
listItems.pousser(e.cible.évaluer);
}setList (listItems);
});
}revenir (
<div>
<étiquette>Rechercher sur le Web: </label>
<type d'entrée="texte" value={input} onChange={handleChange} />{est en attente? "...Chargement des résultats": list.map((item, index) => {
revenir <clé div={index}>{Objet}</div>
})}
</div>
);
}
exporterdéfaut RecherchePage ;
Mise à jour de votre Page de recherche Le composant avec le code ci-dessus donnera la priorité au champ de saisie par rapport à la "zone de résultat de la recherche". Ce simple changement a un effet évident: vous devriez commencer à voir immédiatement le texte que vous saisissez dans le champ de saisie. Seule la "zone de résultats de recherche" aura encore un léger retard. Cela est dû à la startTransitioninterface de programmation d'applications (API) à partir du crochet useTransition.
Le code qui restitue les résultats de la recherche à l'interface utilisateur utilise maintenant le startTransition API. Cela permet au champ de saisie d'interrompre la mise à jour de l'état des résultats de la recherche. Quand le est en attente() La fonction affiche « …Loading result », cela indique qu'une transition (d'un état à l'autre) est en cours.
Réagir useDeferredValue Hook
Le crochet useDeferredValue vous permet de différer le nouveau rendu d'une mise à jour d'état non urgente. Comme le crochet useTransition, le crochet useDeferredValue est un crochet de concurrence. Le crochet useDeferredValue permet à un état de conserver sa valeur d'origine pendant qu'il est en transition.
Le composant SearchPage avec le hook useDeferredValue()
importer { useState, useTransition, useDeferredValue } de "réagir";fonctionPage de recherche() {
constante [,startTransition] = useTransition();
const [entrée, setInput] = useState("")
constante [liste, setList] = useState([]);constante listSize = 30000
fonctionhandleChange(e) {
setInput(e.cible.évaluer);
startTransition(() => {
constante listItems = [] ;pour (laisser je = 0; je < listeTaille; je++){
listItems.pousser(e.cible.évaluer);
}setList (listItems);
});
}
constante valeurdifférée = useValeurdifférée (entrée);
revenir (
<div>
<étiquette>Rechercher sur le Web: </label>
<type d'entrée="texte" value={input} onChange={handleChange} />{liste.map((item, index) => {
revenir <clé div={index} entrée={valeurdifférée} >{Objet}</div>
})}
</div>
);
}
exporterdéfaut RecherchePage ;
Dans le code ci-dessus, vous verrez que le est en attente() fonction n'existe plus. C'est parce que le valeurdifférée variable du crochet useDeferredValue remplace la est en attente() fonctionner pendant la transition d'état. Au lieu d'actualiser la liste des résultats de la recherche lorsque vous tapez un nouveau caractère, elle conservera ses anciennes valeurs jusqu'à ce que l'application mette à jour l'état.
Réagir useSyncExternalStore Hook
Contrairement aux crochets useTransition et useDeferredValue qui fonctionnent avec le code d'application, useSyncExternalStore fonctionne avec des bibliothèques. Il permet à votre application React de s'abonner et de lire des données à partir de bibliothèques externes. Le crochet useSyncExternalStore utilise la déclaration suivante :
constante état = useSyncExternalStore (s'abonner, getSnapshot[, getServerSnapshot]);Cette signature contient les éléments suivants :
- Etat: la valeur du magasin de données renvoyée par le hook useSyncExternalStore.
- s'abonner: enregistre un rappel lorsque le magasin de données change.
- obtenir un instantané: renvoie la valeur actuelle du magasin de données.
- getServerSnapshot: renvoie l'instantané utilisé lors du rendu du serveur.
Avec useSyncExternalStore, vous pouvez vous abonner à un magasin de données entier ou à un champ spécifique dans un magasin de données.
Réagir useInsertionEffect Hook
Le crochet useInsertionEffect est un autre nouveau crochet React qui fonctionne avec les bibliothèques. Cependant, au lieu des magasins de données, le hook useInsertionEffect fonctionne avec les bibliothèques CSS-in-JS. Ce hook résout les problèmes de performances de rendu de style. Il stylise le DOM avant de lire la mise en page dans le crochet useLayoutEffect.
Réagir à l'accroche useId
Vous utilisez le hook useId dans les situations qui nécessitent des ID uniques (à l'exception des clés d'une liste). Son objectif principal est de générer des identifiants qui restent uniques sur le client et le serveur, en évitant l'erreur de non-concordance d'hydratation du serveur React. Le crochet useId utilise la déclaration suivante :
constante id = useId()Dans la déclaration identifiant est une chaîne unique qui inclut le : jeton. Après déclaration, vous pouvez passer le identifiant variable directement au(x) élément(s) qui en ont besoin.
Quelle valeur ces nouveaux crochets ajoutent-ils à React ?
Les hooks useTransition et useDeferredValue sont des hooks de code d'application. Grâce au rendu simultané, ils améliorent les performances des applications. Le crochet useId s'attaque à l'erreur de non-concordance d'hydratation en créant des identifiants uniques sur le client et le serveur.
Les crochets useSyncExternalStore et useInsertionEffect fonctionnent avec des bibliothèques externes pour faciliter le rendu simultané. Le crochet useInsertionEffect fonctionne avec les bibliothèques CSS-in-JS. Le crochet useSyncExternalStore fonctionne avec les bibliothèques de magasins de données comme le magasin Redux.
Ensemble, ces crochets donnent un coup de pouce majeur aux performances, ce qui améliore à son tour l'expérience utilisateur.