Nouvelle fonctionnalité : Batching automatique
La mise en lot est le moment où React regroupe plusieurs mises à jour d'état en un seul rendu pour de meilleures performances. Sans la mise en lot automatique, nous ne mettions en lot que les mises à jour dans les gestionnaires d'événements React. Les mises à jour à l'intérieur des promesses, setTimeout, les gestionnaires d'événements natifs, ou tout autre événement n'étaient pas mis en lots dans React par défaut. Avec la mise en lot automatique, ces mises à jour seront mises en lot automatiquement :
// Avant
setTimeout(() => {setCount(c => c + 1);setFlag(f => !f);
// Apres
setTimeout(() => {setCount(c => c + 1);setFlag(f => !f);}, 1000);Nouvelle rubrique : Transitions
Une transition est un nouveau concept dans React pour distinguer les mises à jour urgentes et non urgentes.
Les mises à jour urgentes reflètent une interaction directe, comme taper, cliquer, appuyer, etc.
Les mises à jour de transition font passer l'interface utilisateur d'une vue à une autre.
Les mises à jour urgentes, comme la frappe, le clic ou la pression, nécessitent une réponse immédiate pour correspondre à nos intuitions sur le comportement des objets physiques. Sinon, elles sont ressenties comme "erronées". Cependant, les transitions sont différentes car l'utilisateur ne s'attend pas à voir chaque valeur intermédiaire à l'écran.
Par exemple, lorsque vous sélectionnez un filtre dans une liste déroulante, vous vous attendez à ce que le bouton du filtre réagisse immédiatement lorsque vous cliquez dessus. Cependant, les résultats réels peuvent passer séparément. Un petit retard serait imperceptible et souvent attendu. Et si vous changez à nouveau le filtre avant que les résultats ne soient rendus, vous ne vous souciez que des derniers résultats.
En général, pour une expérience utilisateur optimale, une seule entrée utilisateur doit entraîner à la fois une mise à jour urgente et une mise à jour non urgente. Vous pouvez utiliser l'API startTransition à l'intérieur d'un événement de saisie pour indiquer à React quelles mises à jour sont urgentes et lesquelles sont des "transitions" :
import {startTransition} from 'react';
setInputValue(input);
startTransition(() => {setSearchQuery(input);});Les mises à jour enveloppées dans startTransition sont traitées comme non urgentes et seront interrompues si des mises à jour plus urgentes comme des clics ou des pressions de touches arrivent. Si une transition est interrompue par l'utilisateur (par exemple, en tapant plusieurs caractères à la suite), React rejettera le travail de rendu périmé qui n'était pas terminé et ne rendra que la dernière mise à jour.
useTransition : un hook pour démarrer les transitions, incluant une valeur pour suivre l'état en attente.
startTransition : une méthode pour démarrer les transitions lorsque le crochet ne peut pas être utilisé.
Les transitions opteront pour le rendu simultané, ce qui permet d'interrompre la mise à jour. Si le contenu est à nouveau en attente, les transitions indiquent également à React de continuer à afficher le contenu actuel tout en assurant le rendu du contenu de transition en arrière-plan.
Nouvelles fonctionnalités de Suspense
La fonction de suspension vous permet de spécifier de manière déclarative l'état de chargement d'une partie de l'arbre des composants si elle n'est pas encore prête à être affichée :
<Suspense fallback={<Spinner />}><Comments /></Suspense>Suspense fait de l'"état de chargement de l'interface utilisateur" un concept déclaratif de première classe dans le modèle de programmation React. Cela nous permet de construire des fonctionnalités de plus haut niveau par-dessus.
Nous avons introduit une version limitée de Suspense il y a plusieurs années. Cependant, le seul cas d'utilisation pris en charge était le fractionnement du code avec React.lazy, et il n'était pas du tout pris en charge lors du rendu sur le serveur.
Dans React 18, nous avons ajouté la prise en charge de Suspense sur le serveur et étendu ses capacités en utilisant des fonctionnalités de rendu simultané.
Suspense dans React 18 fonctionne mieux lorsqu'il est combiné avec l'API de transition. Si vous suspendez pendant une transition, React empêchera le contenu déjà visible d'être remplacé par un fallback. Au lieu de cela, React retardera le rendu jusqu'à ce que suffisamment de données aient été chargées pour éviter un mauvais état de chargement.
Nouveaux Hooks
useId
useId est un nouveau hook permettant de générer des identifiants uniques à la fois sur le client et le serveur, tout en évitant les décalages d'hydratation. Il est principalement utile pour les bibliothèques de composants intégrant des API d'accessibilité qui nécessitent des identifiants uniques. Cela résout un problème qui existe déjà dans React 17 et inférieur, mais c'est encore plus important dans React 18 en raison de la façon dont le nouveau serveur de rendu en streaming fournit le HTML hors de l'ordre.
useTransition
useTransition et startTransition vous permettent de marquer certaines mises à jour d'état comme non urgentes. Les autres mises à jour d'état sont considérées comme urgentes par défaut. React permettra aux mises à jour d'état urgentes (par exemple, la mise à jour d'une entrée de texte) d'interrompre les mises à jour d'état non urgentes (par exemple, le rendu d'une liste de résultats de recherche).
useDeferredValue
useDeferredValue vous permet de différer le nouveau rendu d'une partie non urgente de l'arbre. Il est similaire au débruitage, mais présente quelques avantages par rapport à celui-ci. Il n'y a pas de délai fixe, donc React tentera le rendu différé juste après que le premier rendu soit reflété à l'écran. Le rendu différé est interruptible et ne bloque pas l'entrée de l'utilisateur.
useSyncExternalStore
useSyncExternalStore est un nouveau hook qui permet aux magasins externes de supporter les lectures simultanées en forçant les mises à jour du magasin à être synchrones. Il supprime la nécessité d'utiliser useEffect lors de l'implémentation d'abonnements à des sources de données externes, et est recommandé pour toute bibliothèque qui s'intègre à un état externe à React.
Comentários