React 19.3 est sorti

React 19.3 est sorti le 9 septembre 2026. Deux APIs annoncées en version expérimentale en avril 2025, ViewTransition et les Fragment Refs, deviennent stables.

Les nouveautés principales

View Transitions

Le composant ViewTransition anime les éléments qui entrent, sortent, se déplacent ou changent de taille, grâce à l’API View Transition du navigateur.

import { ViewTransition } from 'react';

{isShowing && (
  <ViewTransition>
    <Component />
  </ViewTransition>
)}

Seules les mises à jour marquées comme Transition déclenchent une animation : startTransition, l’apparition d’un contenu Suspense ou une mise à jour via useDeferredValue. React choisit l’animation selon l’évolution de l’arbre : enter, exit, update ou share (un ViewTransition nommé retiré d’un endroit et ajouté ailleurs). Par défaut, le résultat est un fondu enchaîné, personnalisable par une classe CSS ou par les props onEnter, onExit, onShare et onUpdate.

Pour l’instant, ViewTransition ne fonctionne que dans le DOM. React Native et les autres plateformes sont en cours.

addTransitionType

addTransitionType permet d’animer différemment une même mise à jour d’état selon sa cause, par exemple un carrousel qui avance ou recule.

function nextSlide() {
  startTransition(() => {
    addTransitionType('next');
    setCurrentSlide(c => c + 1);
  });
}

<ViewTransition
  enter={{ 'next': 'from-right', 'previous': 'from-left' }}
  exit={{ 'next': 'to-left', 'previous': 'to-right' }}
>
  <Page />
</ViewTransition>

React ajoute aussi chaque type à l’élément comme type de view transition du navigateur, utilisable en CSS avec :active-view-transition-type(...).

Animer Suspense, les images et les polices

Envelopper une frontière Suspense dans ViewTransition anime l’apparition du contenu final à la place du fallback. L’annonce recommande de n’animer que la mise à jour :

<ViewTransition update="auto" default="none">
  <Suspense fallback={<Fallback />}>
    <Component />
  </Suspense>
</ViewTransition>

Les images et les polices peuvent aussi déclencher Suspense pendant leur chargement lorsqu’elles sont enveloppées dans ViewTransition, ce qui évite les scintillements lorsqu’elles arrivent à des moments différents.

Fragment Refs

On peut désormais passer une ref directement à un Fragment, sans div englobante qui casserait le style ou la mise en page, et sans modifier un composant tiers qui ne transmet pas sa ref. Elle donne une FragmentInstance qui agit sur le DOM des enfants comme un groupe.

function Component() {
  const fragmentRef = useRef(null);

  useEffect(() => {
    fragmentRef.current.focus();
  }, []);

  return (
    <Fragment ref={fragmentRef}>
      {posts.map(post => (
        <Heading key={post.id}>{post.title}</Heading>
      ))}
    </Fragment>
  );
}

La FragmentInstance expose notamment :

addEventListener, removeEventListener et dispatchEvent pour les enfants de premier niveau ;
focus, focusLast et blur, qui parcourent les enfants imbriqués en profondeur ;
observeUsing et unobserveUsing, pour brancher un IntersectionObserver ou un ResizeObserver ;
getClientRects, getRootNode, compareDocumentPosition et scrollIntoView.

Nouveautés de React DOM

browser

Certains composants n’ont pas de rendu pertinent côté serveur, parce qu’ils dépendent de localStorage ou du fuseau horaire local. Un composant peut maintenant appeler use(browser()) : l’appel suspend sur le serveur mais pas sur le client. Le fallback Suspense le plus proche apparaît dans le HTML serveur, puis le composant s’affiche normalement après l’hydratation.

import { use } from 'react';
import { browser } from 'react-dom';

function TimeZone({ defaultValue }) {
  if (defaultValue) {
    return <p>{defaultValue}</p>;
  }

  use(browser());
  const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;

  return <p>{localTimeZone}</p>;
}

Comme tout appel à use, il peut figurer dans une condition ou après un retour anticipé.

Support de Trusted Types

React s’intègre à l’API Trusted Types. Quand un site impose Content-Security-Policy: require-trusted-types-for 'script', les objets TrustedHTML, TrustedScript et TrustedScriptURL sont désormais transmis tels quels au navigateur, au lieu d’être convertis en chaînes puis rejetés. Vos politiques de sanitisation fonctionnent donc comme prévu.

Context dans les Server Components

Un Server Component ne peut pas créer de Context, mais il peut en rendre un importé depuis un module 'use client'. Le composant Provider intermédiaire n’est plus nécessaire :

// user-context.js
'use client';
import { createContext } from 'react';

export const UserContext = createContext(null);

// server-component.js
import { UserContext } from './user-context';

export async function Layout({ children }) {
  const currentUser = await getCurrentUser();

  return <UserContext value={currentUser}>{children}</UserContext>;
}

C’est pratique pour les Contexts qui servent seulement à transmettre des données des Server Components vers l’arbre client.

Autres changements notables

Les Transitions sont rendues indépendamment les unes des autres : une Transition lente ne retarde plus les autres.
Les Effects sont exécutés deux fois en Strict Mode pendant l’hydratation, comme sur les racines rendues côté client.
Support des événements onFullscreenChange et onFullscreenError, de la propriété SVG maskType et de fetchPriority pour les ressources de module.
submitter est inclus dans les événements submit.
Correctifs notables : useDeferredValue bloqué sur une ancienne valeur, useEffectEvent qui lisait des valeurs périmées dans forwardRef et memo, plusieurs bugs de Fast Refresh et d’Activity.

La liste complète figure dans le changelog.

Changements incompatibles

Les notes n’annoncent aucun changement incompatible.

À retenir

React 19.3 rend stables ViewTransition et les Fragment Refs, et permet à un Server Component de rendre un Context existant. La mise à jour ne demande pas de migration annoncée.