Facebook a annoncé la disponibilité d'une nouvelle version majeure de sa bibliothèque JavaScript : React 18. A partir de cette version, de nombreuses fonctionnalités de la bibliothèque sont construites sur une nouveau moteur de rendu simultané. Un changement en coulisse qui débloque de nouvelles fonctionnalités puissantes, souligne Facebook. Concurrent React est opt-in, ce qui signifie qu'il n'est activé que lorsqu'une fonctionnalité simultanée est utilisée. Toutefois Facebook pense que cela aura un impact important sur la façon dont les développeurs créent des applications.

Voici quelques-unes des nouveautés les plus importantes apportées par React 18

Simultanéité

D'après Facebook, l'ajout le plus important dans React 18 est la simultanéité. La simultanéité n'est pas une fonctionnalité en soi. Il s'agit d'un nouveau mécanisme en coulisse qui permet à React de préparer plusieurs versions de votre interface utilisateur en même temps. Vous pouvez considérer la simultanéité comme un détail d'implémentation. React utilise des techniques sophistiquées dans son implémentation interne, comme les files d'attente prioritaires et la mise en mémoire tampon multiple. Mais ces concepts n'apparaissent pas dans les API publiques.

Suspense et les frameworks de données

Dans React 18, vous pouvez commencer à utiliser Suspense pour la récupération de données dans des frameworks tels que Relay, Next.js, Hydrogen ou Remix.

Mise en lot automatique

Le traitement par lots consiste à regrouper plusieurs mises à jour d'état dans un seul nouveau rendu pour de meilleures performances. React 18 ajoute des améliorations de performances prêtes à l'emploi en effectuant plus de traitement par lots par défaut, supprimant ainsi le besoin de mettre à jour manuellement les mises à jour dans le code de l'application ou de la bibliothèque.

Transitions

Les transitions sont un nouveau concept dans React pour faire la distinction entre 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.

En règle générale, 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 dans un événement d'entrée pour informer React des mises à jour urgentes et des « transitions » :

import {startTransition} from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  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 sur les touches arrivent.

Nouvelles API de rendu client et serveur

Facebook a repensé les API de rendu sur le client et le serveur. Ces modifications permettent aux utilisateurs de continuer à utiliser les anciennes API en mode React 17 pendant la mise à niveau vers les nouvelles API dans React 18.

Ces nouvelles API qui sont désormais exportées depuis react-dom/server prennent entièrement en charge le streaming Suspense sur le serveur :

• renderToPipeableStream: pour le streaming dans les environnements Node.
• renderToReadableStream: pour les environnements d'exécution Edge modernes, tels que les workers Deno et Cloudflare.