React 19.2 : Les 2 nouveautés à ne pas manquer

Introduction

La version React 19.2 apporte deux nouveautés majeures côté client : le composant <Activity> et le hook seEffectEvent. Elles visent toutes deux à améliorer les performances et la clarté du code React.

Le composant Activity

<Activity> : le nouveau composant pour pré-rendre du contenu “caché”

Jusqu’ici, on masquait souvent une section de l’UI avec :

{isVisible && <Panel />}

Mais ce pattern démonte complètement le composant et détruit son état.

React 19.2, introduit un moyen plus intelligent :

import { Activity } from 'react';

function App({ showPanel }) {
  return (
    <div>
      <h1>Application</h1>
      <Activity mode={showPanel ? 'visible' : 'hidden'}>
        <Panel />
      </Activity>
    </div>
  );
}

💡 En mode hidden, le composant est pré-rendu en arrière-plan :

• il reste monté,

• ses effets sont suspendus,

• ses mises à jour sont différées,

• et surtout, il est prêt à s’afficher instantanément quand il repasse en visible.

Cela permet de préparer des pages ou panneaux sans impacter la réactivité de l’UI. Parfait pour le préchargement de routes, d’onglets ou de vues secondaires.

Le hook useEffectEvent

useEffectEvent résout un problème courant : les callbacks internes qui obligent à relancer tout un effet quand une prop change.

Exemple classique :

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, theme]); // ⚠️ reconnecte à chaque changement de thème
}

Avec useEffectEvent, on sépare la logique “événementielle” :

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

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', onConnected);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ ne se rejoue pas à chaque changement de thème
}

Le callback voit toujours les valeurs les plus récentes (theme, state, etc.) mais ne force pas le redéclenchement de l’effet principal.

Résumé

Ces deux nouveautés rendent React 19.2 plus fluide, plus rapide et plus prévisible. Elles vous aideront à créer des interfaces plus performantes et plus propres.