React 19.3 : les View Transitions passent en stable

React 19.3, publié le 9 septembre 2026, rend stables les View Transitions et les refs sur les fragments. La version ajoute aussi d’autres fonctions, notamment browser() dans React DOM. L’annonce de l’équipe React présente l’ensemble des changements.

Les View Transitions sont le sujet que nous retiendrions pour une application avec des changements d’écran fréquents. Vous ouvrez une fiche depuis une liste, vous changez de projet, un panneau prend la place d’un autre : ces passages peuvent être plus faciles à suivre lorsque l’interface montre ce qui se déplace ou se transforme.

Cela ne rend pas toutes les animations utiles pour autant. Un formulaire qui répond immédiatement a rarement besoin d’attendre un effet visuel entre deux actions.

Ce que fait ViewTransition

Le composant ViewTransition s’appuie sur l’API du navigateur pour animer un changement de l’interface. Il peut accompagner une apparition, une disparition ou une modification. Par défaut, le rendu utilise un fondu. La référence du composant décrit les déclencheurs et les possibilités de personnalisation.

Imaginez un espace client avec une liste de projets à gauche et leur résumé à droite. Quand on sélectionne un projet, le résumé change. Un fondu discret peut aider à percevoir le remplacement, surtout si les contenus se ressemblent beaucoup.

Pour ce type de passage, notre premier essai serait volontairement modeste : animer le résumé, garder la navigation en place et vérifier que l’utilisateur comprend toujours aussi vite ce qu’il vient d’ouvrir.

Un exemple avec React 19.3

Ce composant est destiné à une application utilisant react et react-dom en version 19.3. Dans un projet avec des Server Components, placez-le côté client. Vous pouvez le copier dans un fichier ApercuProjet.jsx :

import { startTransition, useState, ViewTransition } from 'react';

const projets = [
  { id: 'site', titre: 'Site vitrine', statut: 'Maquettes à valider' },
  { id: 'portail', titre: 'Espace client', statut: 'Recette en cours' },
];

export default function ApercuProjet() {
  const [selection, setSelection] = useState(0);
  const projet = projets[selection];

  return (
    <section aria-label="Aperçu des projets">
      <div role="group" aria-label="Choisir un projet">
        {projets.map((item, index) => (
          <button
            key={item.id}
            type="button"
            aria-pressed={selection === index}
            onClick={() => {
              startTransition(() => setSelection(index));
            }}
          >
            {item.titre}
          </button>
        ))}
      </div>

      <ViewTransition>
        <div aria-live="polite" aria-atomic="true">
          <h2>{projet.titre}</h2>
          <p>{projet.statut}</p>
        </div>
      </ViewTransition>
    </section>
  );
}

Le clic change la sélection dans startTransition. Cette fonction marque la mise à jour comme une Transition React. Elle existe depuis avant React 19.3 et concerne la priorité du rendu ; son nom ne signifie pas qu’elle produit, à elle seule, une animation. Référence de startTransition.

Ici, ViewTransition apporte la partie visuelle autour du résumé. Le groupe de boutons reste en dehors. On évite ainsi de faire disparaître les commandes sous le pointeur pendant que leur contenu change.

Deux détails à régler avant de l’utiliser

D’abord, la préférence de réduction des animations. React ne la prend pas en charge automatiquement pour vous. Ajoutez cette règle à la feuille de style globale si vous voulez supprimer les animations de View Transitions pour les personnes qui ont activé cette préférence :

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Ensuite, essayez votre parcours avec un navigateur qui ne prend pas en charge l’API : il doit rester utilisable sans l’animation. Prévoyez ce test dès le premier écran, avant de généraliser l’effet au reste de l’application.

Dans l’exemple, il reste un groupe de boutons et du texte. La sélection ne dépend pas du fondu. Pour une vraie navigation entre pages, vérifiez aussi la gestion du focus, le titre du document et le comportement du bouton Retour ; une transition visuelle ne s’en charge pas.

Est-ce une raison de remplacer votre bibliothèque d’animation ?

Nous commencerions par examiner les animations déjà présentes. Si une bibliothèque sert seulement à faire apparaître un panneau ou à accompagner un changement de contenu, cet usage mérite un essai avec ViewTransition. Si elle pilote une scène au défilement ou une séquence réglée précisément, il faut comparer les possibilités avant de réécrire le code.

Le test utile est assez simple : reprenez un seul parcours, puis comparez sa lisibilité et sa réactivité avec la version actuelle. Faites-le aussi sur un téléphone moins puissant que votre ordinateur de développement. Un effet agréable dans une démo peut devenir fatigant quand on répète la même action vingt fois.

Avant de passer une application en 19.3

Vérifiez la compatibilité de votre framework et de vos principales bibliothèques. Mettez à jour react et react-dom ensemble ; si le projet utilise TypeScript, vérifiez également ses paquets de types. Une mise à jour mineure reste un changement à essayer sur les parcours qui comptent pour votre application.

Nous regarderions notamment la connexion, les formulaires, les changements de route et les écrans qui chargent des données. Les animations peuvent ensuite être introduites là où l’essai apporte quelque chose de visible.

Sur un site essentiellement éditorial, cette nouveauté ne change pas à elle seule le choix du framework. Notre article sur Astro parle de cette séparation entre contenu et interactivité. React 19.3 concerne ici la façon de faire évoluer une interface qui utilise déjà React.