React 19.2 Lance Activity et useEffectEvent : Les APIs Qui Vont Changer Comment Vous Écrivez des Composants

Salut HaWkers, React vient de lancer sa troisième grande version en moins d'un an, et cette fois a apporté des APIs que beaucoup de développeurs attendaient depuis des années. React 19.2 est arrivé avec le composant <Activity>, le hook useEffectEvent et les React Performance Tracks, des fonctionnalités qui promettent de simplifier des patterns communs et de donner une visibilité totale sur la performance de vos applications.

Avez-vous déjà essayé de créer un effet qui doit accéder à des valeurs actualisées mais sans se ré-exécuter à chaque fois que ces valeurs changent ? Ou voulu montrer et cacher du contenu de façon efficiente sans perdre l'état ? Ces douleurs ont enfin une solution officielle.

Ce Qui Est Arrivé dans React 19.2

C'est la troisième release majeure de React depuis décembre 2024, quand React 19 a été lancé. En juin 2025 est venu React 19.1, et maintenant nous avons le 19.2 avec des features qui étaient en expérimental depuis longtemps.

Calendrier des Releases

Évolution de React en 2024-2025 :

Décembre 2024 : React 19.0 (Server Components stables, Actions, React Compiler)
Juin 2025 : React 19.1 (Améliorations de stabilité, bug fixes)
Décembre 2025 : React 19.2 (Activity, useEffectEvent, Performance Tracks)

L'équipe React a maintenu un rythme consistant de releases, avec un focus sur stabiliser les features expérimentales et ajouter des capacités que la communauté demandait.

La Nouvelle API Activity : Contrôle Total de Visibilité

Le composant <Activity> résout un problème commun : comment montrer et cacher des parties de l'UI de façon efficiente, en maintenant l'état et en évitant les remontages inutiles.

import { Activity, useState } from 'react';

function TabContainer() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <div className="tabs-container">
      <nav>
        <button onClick={() => setActiveTab('home')}>Accueil</button>
        <button onClick={() => setActiveTab('profile')}>Profil</button>
        <button onClick={() => setActiveTab('settings')}>Config</button>
      </nav>

      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
        <HomeTab />
      </Activity>

      <Activity mode={activeTab === 'profile' ? 'visible' : 'hidden'}>
        <ProfileTab />
      </Activity>

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

Pourquoi C'est Important

Avant Activity, les développeurs utilisaient display: none, le rendu conditionnel ou des bibliothèques externes. Chaque approche avait des problèmes :

Problèmes des approches anciennes :

display: none : L'élément est encore dans le DOM, les effets continuent de tourner
Rendu conditionnel : Perd l'état, remonte le composant
Bibliothèques externes : Ajoute une dépendance, peut conflictuer avec React

Avec <Activity>, React sait exactement quoi faire. Quand mode="hidden", le composant :

Garde l'état préservé
Pause les effets et subscriptions
Est retiré du flux de layout
Est prêt à se réactiver instantanément

useEffectEvent : Le Hook Qui Manquait

C'est peut-être le hook le plus attendu depuis l'introduction des hooks en 2019. useEffectEvent résout le problème des callbacks dans les effets qui ont besoin des valeurs actuelles sans causer de ré-exécution.

import { useEffect, useEffectEvent, useState } from 'react';

function ChatRoom({ roomId, theme }) {
  const [messages, setMessages] = useState([]);

  // Cet event voit toujours le theme actuel
  // mais NE fait PAS re-exécuter useEffect quand theme change
  const onMessage = useEffectEvent((message) => {
    // A toujours accès au theme le plus récent
    showNotification(message, theme);
  });

  useEffect(() => {
    const connection = createConnection(roomId);

    connection.on('message', (msg) => {
      onMessage(msg);  // Appelle l'event handler
      setMessages(prev => [...prev, msg]);
    });

    return () => connection.disconnect();
  }, [roomId]); // Pas besoin de theme dans les deps !

  return <MessageList messages={messages} />;
}

Le Problème Qu'il Résout

Avant, vous aviez deux options mauvaises :

Option 1 : Mettre dans les dépendances (cause une reconnexion)

// PROBLÈME : Reconnecte à chaque fois que theme change
useEffect(() => {
  const connection = createConnection(roomId);
  connection.on('message', (msg) => {
    showNotification(msg, theme);
  });
  return () => connection.disconnect();
}, [roomId, theme]); // theme ici cause des problèmes

Option 2 : Utiliser ref (verbeux et propice aux bugs)

// PROBLÈME : Code verbeux et facile d'oublier de mettre à jour
const themeRef = useRef(theme);
useEffect(() => {
  themeRef.current = theme;
});

useEffect(() => {
  const connection = createConnection(roomId);
  connection.on('message', (msg) => {
    showNotification(msg, themeRef.current);
  });
  return () => connection.disconnect();
}, [roomId]);

Avec useEffectEvent, le code est propre et l'intention est claire.

React Performance Tracks : DevTools de Niveau Professionnel

La troisième grande addition de React 19.2 sont les Performance Tracks, une intégration profonde avec Chrome DevTools qui montre exactement ce que React fait pendant chaque frame.

Ce Que Vous Voyez Maintenant

Informations disponibles dans les Performance Tracks :

Temps passé dans chaque phase de render
Composants qui ont causé des re-renders
Suspense boundaries et leurs états
Transitions et leurs priorités
Effects et quand ils ont exécuté

// En analysant ce composant dans DevTools
function Dashboard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchDashboardData().then(setData);
  }, []);

  return (
    <Suspense fallback={<Loading />}>
      <Charts data={data} />
      <Metrics data={data} />
      <RecentActivity data={data} />
    </Suspense>
  );
}

Dans le Performance Track, vous verrez :

Quand le Suspense a montré le fallback
Combien de temps chaque composant enfant a pris pour rendre
S'il y a eu des re-renders inutiles
Où le temps a été dépensé (render vs commit vs passive effects)

Comment Activer

Les Performance Tracks apparaissent automatiquement quand vous enregistrez une session dans l'onglet Performance de Chrome DevTools, tant que vous utilisez React DevTools à jour.

Mises à Jour de Sécurité Importantes

React 19.2 est aussi venu avec des patches de sécurité critiques. Des vulnérabilités ont été découvertes dans React Server Components qui pouvaient causer DoS et exposition de code source.

Versions avec patches de sécurité :

React 19.0.3
React 19.1.4
React 19.2.3

Si votre application utilise React Server Components avec des frameworks comme Next.js ou Remix, mettez à jour immédiatement vers les versions les plus récentes.

Comparatif : React 19.0 vs 19.1 vs 19.2

Feature	React 19.0	React 19.1	React 19.2
Server Components	Stable	Stable	Stable + Patches
React Compiler	Beta	Stable	v1.0
Actions	Stable	Stable	Stable
Activity	-	-	Nouveau
useEffectEvent	-	-	Nouveau
Performance Tracks	-	-	Nouveau

Comment Mettre à Jour Vers React 19.2

La mise à jour est directe si vous êtes déjà sur React 19.x :

npm install react@19.2.3 react-dom@19.2.3
# ou
yarn add react@19.2.3 react-dom@19.2.3
# ou
pnpm add react@19.2.3 react-dom@19.2.3

Pour ceux qui viennent de React 18, la migration demande plus d'attention, surtout si vous utilisez Server Components ou le nouveau modèle de Suspense.

Ce Qu'il Faut Attendre de React en 2026

L'équipe React a déjà signalé quelques directions pour l'année prochaine :

Tendances pour 2026 :

Compiler encore plus agressif dans les optimisations
Meilleure intégration avec les frameworks
APIs plus simples pour les cas communs
Performance Tracks élargis

React continue d'évoluer de façon pragmatique, ajoutant des features que la communauté a vraiment besoin.

Conclusion

React 19.2 apporte trois additions significatives qui vont impacter comment nous écrivons des applications. <Activity> simplifie des patterns d'UI qui avant exigeaient des workarounds. useEffectEvent résout une douleur ancienne avec les effects et callbacks. Et les Performance Tracks donnent une visibilité sans précédent sur ce qui se passe dans votre application.

Si vous travaillez avec React, dédiez du temps pour comprendre ces nouvelles APIs. Elles ne sont pas juste convenables, mais représentent la direction que React prend.

Si vous voulez approfondir React et comprendre comment maîtriser ces concepts, je recommande de consulter l'article sur JavaScript et le Monde de l'IoT où nous explorons comment JavaScript connecte différents contextes.