React 19.2 expliqué : Activity, useEffectEvent et rendu statique

React 19.2 reconnaît discrètement ce que les développeurs soupçonnaient depuis des années : détruire et reconstruire des composants à chaque cycle d’affichage/occultation n’a jamais vraiment été économique.

Imaginez un scénario courant : un utilisateur passe d’une à l’autre des onglets de votre application. La liste récupère à nouveau ses données. Le formulaire se vide. La position de défilement est réinitialisée en haut. Cela se produit à chaque changement d’état, car React détruit et reconstruit constamment des éléments de l’interface qui n’avaient pas réellement besoin d’être supprimés.

Ce n’est pas quelque chose que vous avez brisé dans votre propre code. C’est simplement la façon dont React s’est comporté depuis ses premières versions. Avec React 19.2, le framework aborde enfin ce problème directement.

Le problème dont personne ne parle

La plupart des conseils de performance portent sur les mêmes problèmes : l’exécution trop fréquente d’effets, des requêtes réseau redondantes, ou l’oubli d’envelopper une valeur dans useMemo. Ces problèmes sont réels. Mais il existe un coût plus discret qui est rarement évoqué : la charge liée au montage et au démontage répétitif des composants.

Pensez à un tableau de bord avec des onglets, à une pile de navigation de type mobile, ou à un modal qui s’ouvre et se ferme à plusieurs reprises au cours d’une même session. Chaque fois que vous cachez quelque chose en utilisant une expression conditionnelle comme {isVisible && <Component />}, React ne met pas simplement ce élément en pause — il le supprime complètement. L’état est effacé, les effets sont démantelés puis exécutés à nouveau depuis zéro. Lorsque le contenu réapparaît, le DOM doit être reconstruit comme s’il n’avait jamais existé.

Pour les composants petits et simples, ce coût reste invisible. Mais pour les tableaux de bord gourmands en données, les lecteurs vidéo intégrés ou tout élément utilisant un widget tiers lourd, cette destruction et reconstruction répétées deviennent une véritable source de ralentissement des performances.

Résoudre précisément ce problème était l’un des objectifs principaux de React 19.2, aux côtés de deux autres améliorations demandées par les développeurs.

1. Le composant — Pausez avant de détruire

C’est l’ajout phare de cette version, et il représente une véritable nouvelle approche pour la gestion des éléments UI cachés par React.

Vous pouvez maintenant marquer une section de votre interface comme visible ou cachée sans avoir à la désinstaller complètement, en utilisant le nouveau composant Activity. Lorsque le contenu est caché, il conserve son état actuel, saute l’exécution de ses effets, et son rendu est mis en arrière-plan afin qu’il ne concurrence jamais ce qui est réellement visible à l’écran.

import { unstable_Activity as Activity } from 'react';

function Dashboard({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === 'analytics' ? 'visible' : 'hidden'}>
        <AnalyticsPanel />
      </Activity>

      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsPanel />
      </Activity>
    </>
  );
}

Avec ce modèle, un AnalyticsPanel caché dans une vignette en arrière-plan ne recharge pas ses données ni ne perd sa position de défilement lorsque l’on passe d’une autre page à celle-ci puis revient — il reste simplement inactif tout ce temps. Activity dans React 19.2 fonctionne en deux modes : en mode hidden, les enfants sont visuellement cachés mais pas supprimés de l’arborescence — leurs effets restent montés, mais toutes les mises à jour en attente sont différées jusqu’à ce qu’il n’y ait vraiment plus rien d’urgent à traiter ; en mode visible, les enfants s’affichent normalement sans aucune interférence avec le traitement des mises à jour. Un effet secondaire utile de cette conception est que vous pouvez pré-renderiser des vignettes que l’utilisateur n’a même pas encore cliquées.

Cas d’usage concrets :

• Formulaires où les utilisateurs naviguent à plusieurs reprises entre les différentes étapes

Graphiques ou tableaux de données coûteux intégrés à des interfaces à onglets

Structures d’écran ressemblant aux modèles de navigation mobile, similaires à React Navigation

Préchauffage de l’écran suivant avant même que l’utilisateur ne quitte l’écran actuel

2. useEffectEvent — Logique d’événement stable à l’intérieur des effets

Si vous avez déjà placé une fonction dans le tableau de dépendances de useEffect uniquement pour calmer le linter, seulement pour voir cet effet s’exécuter bien plus souvent qu’il ne le devrait, ce hook résout précisément ce problème.

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification(`Connected to ${roomId}`, theme);
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => onConnected());
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // theme no longer needs to be here
}

Dans onConnected, vous lisez toujours la valeur la plus récente de theme, mais mettre à jour theme seul ne déclenchera pas une nouvelle connexion à la salle de chat. Il s’agit essentiellement de la version officielle d’une solution de contournement que les développeurs ont mise en place manuellement avec useRef depuis des années — React lui donne désormais un nom ainsi qu’un soutien de premier plan.

3. Rendu statique partiel — pages à vitesse statique avec des données en temps réel

Ce fonctionnalité facultative s’adresse aux équipes qui développent des applications rendues côté serveur. Que vous utilisiez Next.js, Remix ou que vous travailliez directement avec RSC, React 19.2 vous permet de pré-renderiser l’enveloppe statique d’une page à l’avance et d’ajouter progressivement les éléments dynamiques dès qu’ils sont prêts.

La majeure partie de la page est affichée dès le départ sous forme d’enveloppe immuable. Tout ce qui dépend d’une requête réseau est rempli par la suite et intégré progressivement au fur et à mesure de l’arrivée des données. Cela signifie que les visiteurs voient immédiatement votre barre de navigation et votre section principale, tandis que tout élément personnalisé apparaît quelques instants plus tard, sans avoir à afficher un indicateur de chargement pour toute la page.

En résumé

Le message central derrière React 19.2 est que ce n’est pas une réécriture majeure du framework — c’est React qui corrige des hypothèses intégrées dans son modèle il y a environ une décennie. Cacher quelque chose ne devrait pas vous forcer à le désinstaller. Écrire des effets ne devrait pas signifier de choisir entre des valeurs obsolètes et une exécution inutile. Et la vitesse de première affichage ne devrait pas être entravée par la réponse API la plus lente.

Si votre application fonctionne de manière lente de manières que useMemo et React.memo n’ont jamais complètement résolues, cette version vise très probablement précisément ce problème. Essayez d’appliquer l’un de ces schémas à une vue à onglets dans votre propre projet cette semaine — la modification est mineure, mais son impact sur les performances perçues est tout sauf négligeable.

Lectures complémentaires

• React 19.2 SSR Primitives : Activity, cacheSignal et PPR expliqués — Découvrez comment le nouveau composant Activity, cacheSignal et le pré-rendering partiel de React 19.2 permettent aux développeurs d’avoir un contrôle direct sur les performances du rendu serveur.

Les propositions TC39 en 2026 : explication des décorateurs, de l’API Temporal et des Signals — Une présentation pratique de trois propositions TC39 — les décorateurs natifs, l’API Temporal et les Signals — ainsi que de leur impact sur les développeurs JavaScript et TypeScript full-stack.