Adopter React 19.2 : fonctionnalités pour les interfaces à onglets et liste de vérification pour la mise à niveau

Les onglets, les assistants et les listes hors écran présentent un point commun : lorsqu’un panneau est caché grâce à un affichage conditionnel, il est démonté, emportant avec lui la position de défilement, les formulaires partiellement remplis ainsi que les données chargées. React 19.2 propose une solution avec le composant Activity. Ce guide utilise Activity dans un layout à onglets, puis aborde le reste des nouveautés de cette version ainsi qu’une liste de contrôle pour déterminer quand mettre à jour.

Ce que 19.2 cherche à corriger

React sort désormais plusieurs versions par an, et 19.2 n’est pas une réécriture complète. Il vise des problèmes anciens : perte de l’état lors du démontage, difficultés liées aux dépendances des effets, et le compromis entre des pages statiques rapides et des données à jour.

Activity : cacher l’interface sans la détruire

Pensez à Activity comme une alternative plus intelligente à {condition && <Panel />}. Il accepte une propriété mode pouvant prendre deux valeurs :

• hidden cache les enfants, désinstalle leurs effets et reporte toutes mises à jour jusqu’à ce que React n’ait plus de tâches à plus haute priorité.
• visible affiche les enfants, réinstalle leurs effets et traite les mises à jour normalement.

Le détail important concerne ce qui est conservé. L’état du composant et l’arbre rendu restent inchangés, ce qui permet un retour instantané à l’état précédent, mais les effets sont nettoyés lorsque le composant est caché. Par conséquent, les abonnements, les temporiseurs et les requêtes périodiques s’arrêtent, ce qui est généralement souhaitable pour un panneau que personne ne regarde.

L’exemple ci-dessous encadre un panneau de paramètres et un panneau de facturation dans leurs propres limites Activity, et la propriété activeTab détermine lequel est visible. Les deux panneaux conservent leur position de balayage et les valeurs des champs de formulaire lorsque l’utilisateur change de panneau.

// Preserve a tab's scroll position and form state
// even when the user switches away from it
import { unstable_Activity as Activity } from 'react';

function ProfileTabs({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsPanel />
      </Activity>
      <Activity mode={activeTab === 'billing' ? 'visible' : 'hidden'}>
        <BillingPanel />
      </Activity>
    </>
  );
}

Un point important : ce fragment importe unstable_Activity, le nom utilisé dans les versions préliminaires. Dans la version stable 19.2, ce composant est exporté sous le nom Activity ; vérifiez donc la documentation actuelle et importez-le sous ce nom lors de votre mise à niveau.

Puisque rien n’est détruit ni reconstruit à chaque changement, la navigation semble plus rapide. Le coût se fait sentir en termes de mémoire : chaque panneau caché reste actif, il est donc conseillé d’attribuer Activity aux écrans que les utilisateurs sont susceptibles de consulter à nouveau, plutôt que d’appliquer cette règle à chaque route.

useEffectEvent : valeurs fraîches sans réexécution des effets

Si vous avez déjà ajouté une valeur à un tableau de dépendances uniquement pour satisfaire l’outil de vérification, puis observé un effet se déclencher alors qu’il ne le devrait pas, ce hook constitue la solution. Il permet à un effet de lire les dernières propriétés et états via une fonction distincte, sans que cette valeur ne provoque une réexécution de l’effet.

Ici, theme est lu à l’intérieur de onConnected, de sorte que la connexion dépend uniquement de roomId.

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // always fresh theme
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => onConnected());
    return () => connection.disconnect();
  }, [roomId]); // theme intentionally left out — and that's fine now
}

Notez que l’extrait omet l’appel connection.connect() qui serait nécessaire dans une implémentation réelle avant de retourner les opérations de nettoyage.

Pré-rendu partiel dans React DOM

Le pré-rendu partiel a commencé en tant que fonctionnalité expérimentale de Next.js 14, et avec la version 19.2, cette capacité fait partie intégrante de react-dom. React pré-rend la structure statique d’une page à l’avance, laisse des espaces là où se trouvent les limites dynamiques de Suspense, puis remplit ces espaces au fur et à mesure des demandes. Vous obtenez ainsi une vitesse proche de celle de la génération statique, avec en plus la fraîcheur offerte par le rendu serveur. Notre analyse approfondie des primitifs SSR de React 19.2, cacheSignal et PPR décrit en détail ces API.

Ajouts importants à connaître

• Chrome DevTools intègre désormais des indicateurs de performance spécifiques à React, vous permettant de voir quelles tâches React classe comme bloquantes, quelles autres comme des transitions, etc.
• cacheSignal pour les composants serveurs React aide à éviter des traitements redondants liés à des calculs en mémoire cache.
• Des améliorations ont été apportées au streaming SSR afin d’accélérer le temps nécessaire pour atteindre un état interactif.

Sécurité : mettez à jour en premier les applications RSC

Des vulnérabilités critiques dans les composants serveurs React ont été révélées en décembre 2025. Les applications utilisant React 19.0.0 à 19.2.2 et les composants RSC, y compris celles créées avec la configuration par défaut de create-next-app, étaient vulnérables à l’exécution de code à distance. Si vous utilisez des composants serveurs, mettez-vous immédiatement à jour vers une version corrigée ; consultez les avis officiels de React et Next.js pour connaître les versions exactes corrigées, car des correctifs supplémentaires ont été publiés.

Votre équipe doit-elle mettre à jour maintenant ?

• Mettez à jour rapidement si vous développez des applications SSR complexes, des interfaces avec de nombreuses onglets ou étapes, ou si vous continuez à lutter contre les bugs liés aux dépendances.
• Mettez à jour avec prudence si vous gérez une grande base de code héritée : essayez d’abord les règles plus strictes de linting pour les hooks sur une branche et corrigez ce qu’elles signalent.
• Mettez à jour immédiatement, quelles que soient les fonctionnalités, si vous utilisez des composants serveur et n’avez pas appliqué les correctifs de sécurité.

En résumé

19.2 est une version discrète qui apporte des améliorations concrètes dans le travail quotidien : Activity change la façon dont on envisage l’état conservé, useEffectEvent élimine un type de solutions artisanales liées aux dépendances, et le pré-rendering réduit l’écart entre les pages statiques et dynamiques. Testez-les sur une interface à onglets avant de les déployer largement.

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.
• Lire les traces de performances de React dans Chrome DevTools pour identifier des rendus lents — Apprenez comment les traces Scheduler, Components et Server ajoutées dans React 19.2 montrent où passe le temps lors d’une interaction lente, ainsi qu’un processus record-fix-record pour y remédier.