Le très attendu React v18 est enfin sorti il ​​y a quelques mois. Bien qu'il n'y ait pas eu de changements majeurs, certaines fonctionnalités intéressantes ont été ajoutées et méritent d'être examinées. Cet article passera en revue quelques nouveaux ajouts et comment passer à React v18.

Comment mettre à niveau vers React 18

Pour installer la dernière version de React, exécutez cette commande dans un terminal :

npm installer réagir réagir-dom

Ou si vous utilisez du fil :

fil ajouter réagir réagir-dom

Une fois que vous avez installé la dernière version, vous pouvez commencer à profiter de ses nouvelles fonctionnalités.

Il y a plusieurs ajouts dans React 18; voici quatre des plus remarquables.

1. Mode strict

StrictMode est une fonctionnalité que vous pouvez utiliser pour mettre en évidence les problèmes potentiels dans une application. Les vérifications en mode strict s'exécutent uniquement en mode développement et n'affecteront pas la version de production. Cependant, ils peuvent être très utiles pour identifier les problèmes potentiels dans votre code.

instagram viewer

Vous pouvez activer le mode strict pour n'importe quelle partie de votre application. Par exemple, vous pouvez l'activer pour tous vos composants, ou seulement pour certains d'entre eux.

importer Réagir de 'réagir';
fonctionDémoExemple() {
revenir (
<div>
<Premier composant />
<Réagir. Mode strict>
<SecondComposant />
<TroisièmeComposant />
</React.StrictMode>
<Quatrième Composante />
</div>
 );
}

Dans le code ci-dessus, les quatre composants seraient vérifiés pour les problèmes potentiels. Cependant, les contrôles de mode stricts ne s'appliqueront qu'aux et .

StrictMode aide également d'autres manières, telles que :

  • Identification des composants avec des cycles de vie dangereux : Si un composant a une méthode de cycle de vie marquée comme non sécurisée, le mode strict vous en avertira.
  • Avertissement concernant l'utilisation de l'ancienne API de référence de chaîne : Si vous utilisez l'API de référence de chaîne héritée, le mode strict vous avertira de son utilisation.
  • Avertissement concernant l'utilisation obsolète de findDOMNode : Si vous utilisez l'API obsolète findDOMNode, le mode strict vous en avertira.
  • Détecter les effets secondaires inattendus : Si un composant déclenche des effets secondaires (tels que setState) à des endroits inattendus, le mode strict vous en avertira.
  • Détection de l'ancienne API de contexte : Si vous utilisez l'API contextuelle héritée (qui est désormais obsolète), le mode strict vous en avertira.
  • Garantir un état réutilisable : Si vous avez un état utilisé par plusieurs composants, le mode strict vous aidera à vous assurer qu'il est correctement synchronisé.

Dans l'ensemble, le mode strict peut être une fonctionnalité utile dans le développement pour aider à identifier les problèmes potentiels dans votre code.

2. Transitions

Les transitions vous permettent de marquer certaines mises à jour de l'interface utilisateur comme non urgentes. Cela signifie que React peut donner la priorité à d'autres mises à jour plus importantes.

Par exemple, si vous avez deux champs de texte, un pour une requête de recherche et un pour ses résultats, vous souhaiterez marquer le champ de texte des résultats de la recherche comme une transition. De cette façon, React sait qu'il n'a pas besoin de restituer de toute urgence ce champ de texte chaque fois que l'utilisateur tape quelque chose dans le champ de texte de la requête de recherche.

Vous pouvez utiliser la fonction startTransition pour marquer une mise à jour de l'interface utilisateur comme une transition. Voici un exemple :

importer { startTransition } de 'réagir';
startTransition(() => {
// Marquez toutes les mises à jour d'état non urgentes à l'intérieur comme des transitions
});

Ce code marquerait toutes les mises à jour d'état dans la fonction startTransition comme des transitions. De cette façon, React peut se concentrer sur d'autres mises à jour plus importantes de l'interface utilisateur.

3. Mise en lot automatique

React fournit une fonctionnalité utile appelée traitement par lots qui réduit le nombre de re-rendus qui ont lieu lorsqu'un état change. Cela peut être très utile pour optimiser les performances, en particulier lorsque travailler avec du code asynchrone.

Auparavant, si vous aviez une promesse ou faisiez un appel réseau, les mises à jour d'état ne seraient pas groupées et React devrait restituer plusieurs fois. Cependant, avec le traitement par lot automatique dans React 18, toutes les mises à jour d'état sont groupées, même dans les promesses, les setTimeouts et les rappels d'événements. Cela réduit considérablement le travail que React doit faire en arrière-plan.

Vous pouvez regrouper manuellement les mises à jour d'état à l'aide de la fonction flushSync, mais depuis React 18, ce processus est désormais automatique. Cela se traduit par de bien meilleures performances, car React attendra la fin d'une micro-tâche avant de restituer.

4. Nouveaux crochets

La version 18 introduit de nombreuses nouveautés Crochets de réaction, y compris useId, useTransition et useDeferredValue. Ces nouveaux crochets offrent un excellent moyen d'ajouter des fonctionnalités supplémentaires à vos applications React avec un minimum d'effort.

React 18 offre des performances d'application accrues

React 18 est là et apporte de grandes améliorations aux performances des applications Web. Avec la nouvelle version de React, vous pouvez facilement créer des applications Web plus réactives et plus performantes dans l'ensemble. Donc, si vous cherchez à créer une application Web qui fonctionne bien et qui a fière allure, assurez-vous de consulter React 18.