Deux évolutions majeures de React : View Transitions et Activity

• React a dévoilé de nouvelles fonctionnalités expérimentales
  • View Transitions permet d’appliquer facilement des animations de transition de page fluides
  • Activity permet d’optimiser les performances en masquant l’interface tout en préservant l’état
• En plus de cela, le développement de diverses fonctionnalités est en cours, comme la gestion automatique des dépendances, les Fragment Refs et les Concurrent Stores

Principales caractéristiques de View Transitions

• Les animations sont implémentées à l’aide de la nouvelle API navigateur startViewTransition
• Avec <ViewTransition>, on peut indiquer quels éléments animer, et utiliser startTransition, useDeferredValue, Suspense, etc. comme déclencheurs
• Une animation de crossfade est fournie par défaut, avec possibilité de personnalisation en CSS
• Les shared element transitions sont également prises en charge, permettant un déplacement fluide entre des éléments ayant le même attribut name
• L’API addTransitionType permet d’assigner des animations différentes selon la cause de la transition

Principales caractéristiques d’Activity

• <Activity> permet de masquer l’interface tout en conservant l’état, ou d’effectuer un prérendu si nécessaire
• En mode masqué, les composants sont démontés mais leur état est conservé, et leur priorité de rendu diminue
• Lors d’un changement de page, il est possible de restaurer des champs de saisie ou un état sans les perdre
• À l’avenir, un mode pour les modales ainsi qu’une fonction de suppression d’état pour économiser la mémoire devraient aussi être ajoutés
• En rendu côté serveur (SSR) également, Activity prend en charge des optimisations

Autres fonctionnalités en cours de développement

• React Performance Tracks

  • Développement en cours d’une fonctionnalité ajoutant des pistes personnalisées dédiées à React dans le profiler de performances du navigateur
  • Des problèmes de performances et de liaison avec Suspense sont encore en cours de résolution

• Gestion automatique des dépendances d’effet (Automatic Effect Dependencies)

  • Objectif : utiliser le compilateur React pour insérer automatiquement les dépendances de useEffect, afin de rendre le code plus concis et plus facile à comprendre
  • L’idée est d’encourager une approche centrée sur les effects plutôt que sur le cycle de vie des composants

• Compiler IDE Extension

  • Développement en cours d’une extension IDE basée sur React Compiler
  • Elle devrait proposer diverses fonctions, comme l’optimisation du code, la détection des violations de règles et l’affichage des dépendances insérées automatiquement

• Fragment Refs

  • Recherche en cours sur une fonctionnalité de Fragment Ref permettant de gérer plusieurs éléments DOM avec une seule ref
  • L’objectif est de faciliter les appels à l’API DOM

• Gesture Animations

  • Des recherches sont en cours pour étendre View Transition aux animations basées sur les gestes tactiles
  • Les travaux portent notamment sur les mouvements continus, la gestion des actions inachevées et l’inversion entre nouveau DOM et DOM existant

• Concurrent Stores

  • Objectif : intégrer naturellement des stores externes à React de manière concurrente (Concurrent)
  • Une nouvelle API de style use(store) est en cours de développement pour dépasser les limites de useSyncExternalStore