Vous songez à essayer de coder avec React? Voici les nouvelles fonctionnalités clés à essayer dans React 18.

React est une bibliothèque JavaScript open source très populaire créée par Facebook en 2013. En raison de sa flexibilité, de nombreux développeurs exploitent certaines de ses fonctionnalités pour créer des composants d'interface utilisateur (UI) rapides, efficaces et réutilisables.

En mars 2022, l'équipe a lancé la version la plus récente et la plus attendue de la bibliothèque React, React 18, qui comprend de nouvelles fonctionnalités axées sur l'amélioration des performances de l'application.

Les nouvelles fonctionnalités de React 18

React 18 consiste en quelques nouvelles fonctionnalités utiles ajoutées au bibliothèque JavaScript open source. Beaucoup de ces changements n'étaient pas dans la version précédente tandis que d'autres fonctionnalités ont été améliorées. Certaines de ces fonctionnalités incluent; une nouvelle API racine, le batching automatique, l'API de transition, l'API Suspense et la sortie de nouveaux Hooks.

instagram viewer

Nouvelle API racine

L'API racine dans React garde une trace de la façon dont le composant de niveau supérieur est rendu dans l'arborescence. Dans les versions précédentes de React, le rendre a été utilisée pour exécuter le rendu qui s'appelle désormais l'API racine héritée.

Cependant, React 18 est livré avec une nouvelle API racine qui crée une racine en utilisant le créerRoot méthode, puis rend un composant React à la racine créée à l'aide de la rendre méthode.

Cette nouvelle API racine vous donnera accès aux fonctionnalités de cette version récente telles que la fonctionnalité d'API de transition discutée plus tard. Bien que l'ancienne méthode fonctionne toujours dans React 18, elle pourrait être supprimée à l'avenir.

L'extrait ci-dessous montre comment l'API racine est structurée à la fois de manière héritée et nouvelle.

API racine héritée

importer RéagirDOM depuis'réagir-dom';
importer Application depuis'./Application';
ReactDOM.render(<Application />, document.getElementById('application'))

Nouvelle API racine

importer RéagirDOM depuis'réagir-dom/client';
importer Application depuis'./Application';
constante root = ReactDOM.createRoot(document.getElementById('application'));
root.render(<Application />)

Mise en lot automatique

Le traitement par lots dans React implique plusieurs mises à jour d'état dans un seul rendu sur chaque événement de navigateur, par exemple un cliquez sur l'événement. Tout changement d'état qui s'est produit en dehors d'un événement comme une promesse ou un rappel ne sera pas regroupé.

Avec React 18, les mises à jour d'état par lots sont effectuées automatiquement, quel que soit l'endroit où ces mises à jour se produisent. Cette fonctionnalité fournit une amélioration immédiate des performances et du temps de rendu. Cependant, si vous avez un état de composant que vous ne souhaitez pas voir en lot, vous pouvez le désactiver à l'aide de la flushSync méthode. Vous trouverez ci-dessous un exemple d'extrait sur la façon dont cela peut être fait ;

importer { flushSync } depuis'réagir-dom';
fonctionpoignéeCliquez() {
 flushSync(() => {
 setCount(compter => compter + 1);
]});
 flushSync(() => {
 setStore(magasin => !magasin);
});
}

API de transition

Dans React, les mises à jour effectuées dans l'interface utilisateur peuvent être classées comme des mises à jour urgentes et de transition également appelées non urgentes. Un exemple de mise à jour urgente peut être un cas de saisie d'un texte dans un champ tandis que celui d'une mise à jour de transition peut être une fonctionnalité de filtrage de recherche.

Maintenant, si de telles mises à jour se produisent simultanément, cela pourrait être qualifié d'opération lourde et pourrait entraîner le gel de votre application. Pour résoudre ce problème, c'est là que l'API de transition a appelé le startTransition vient jouer. Cette nouvelle fonctionnalité indique à React quelles mises à jour doivent être marquées comme "transitions", améliorant ainsi les interactions des utilisateurs. Voici un exemple de code de la façon dont cela fonctionne;

importer { startTransition } depuis"réagir";
startTransition(() => {
 setSearch (entrée);
});

Le suspense

Lorsqu'une application est rendue sur le serveur, un fichier HTML statique est renvoyé au navigateur permettant à l'utilisateur de voir à quoi ressemble l'application pendant le chargement du JavaScript. Lorsque le fichier est chargé, le HTML devient dynamique avec ce qu'on appelle hydratation. Le défaut ici est que si tout cela n'est pas en place, votre application ne deviendrait pas interactive.

Pour résoudre ce problème, React 18 fournit deux nouvelles fonctionnalités de rendu côté serveur (SSR) utilisant le Le suspense composant;

  • Le streaming HTML permet d'envoyer des éléments d'un composant au fur et à mesure qu'ils sont rendus.
  • L'hydratation sélective privilégie l'interactivité des composants sélectionnés par un utilisateur.

Nouveaux crochets

Un grand tournant pour React a été l'introduction de crochets dans React la version 16 qui permet aux composants fonctionnels d'accéder aux états et à d'autres fonctionnalités de React sans écrire de classes. Le React 18 est livré avec cinq nouveaux crochets pour améliorer l'expérience des développeurs ;

  • useId: Ce crochet nous permet de créer un identifiant unique (ID) dans notre application à la fois sur le serveur et sur le client.
  • useTransition: il est utilisé avec startTransition pour créer une nouvelle mise à jour d'état qui peut être qualifiée de non urgente.
  • useDefferedValue: permet de différer les mises à jour moins urgentes.
  • useSyncExternalStore: ce crochet est utile lors de la mise en œuvre d'abonnements à des sources de données externes.
  • useInsertionEffect: ce hook est limité aux auteurs de bibliothèques CSS-in-JS pour injecter des styles dans le DOM.

Comment mettre à jour pour réagir 18

Pour effectuer une mise à jour, le gestionnaire de packages npm ou yarn peut être utilisé en exécutant la commande suivante dans le terminal.

npm installer réagir réagir-dom

ou

fil ajouter réagir réagir-dom

Ensuite, vous devrez modifier le index.js fichier dans le répertoire racine du dossier du projet de l'API héritée vers la nouvelle API racine, comme indiqué précédemment.

Comment configurer un nouveau projet React 18

Pour configurer un nouveau projet React 18, le package create-react-app est installé avec npm ou yarn dans le terminal ;

npx créer-react-app mon-application-react

ou

ajouter du fil créer-react-app mon-application-react

Améliorez les performances de vos applications avec React 18

Vous connaissez maintenant certaines nouvelles fonctionnalités de React 18 telles que la nouvelle API racine, Suspense, Transition ou Automatic Batching, et comment mettre à niveau vers cette nouvelle version et la configurer à partir de zéro.

Ces changements récents apportés à React sont prêts à être expérimentés dès maintenant.