<Activity>

Définition

Composant livré dans React 19.2 (1er octobre 2025) qui masque ou révèle un sous-arbre sans le démonter. En mode hidden, le contenu est caché en display: none, l'état React et le DOM (brouillon de textarea, position vidéo) sont conservés, les effets sont nettoyés et le rendu continue à basse priorité. Il permet aussi de pré-rendre en arrière-plan un écran pas encore visible.

Analogie

Mettre une pièce en veille : lumières éteintes, mais les meubles restent en place pour le retour.

Exemple de code

import { Activity } from 'react';

function App({ tab }) {
  return (
    <>
      <Activity mode={tab === 'home' ? 'visible' : 'hidden'}>
        <Home />     {/* état conservé quand on change d'onglet */}
      </Activity>
      <Activity mode={tab === 'posts' ? 'visible' : 'hidden'}>
        <Posts />    {/* pré-rendu à basse priorité si caché */}
      </Activity>
    </>
  );
}

Cas d'usage

Onglets, barres latérâles, écrans d'un flux multi-étapes dont on veut garder l'état ; pré-chargement du code et des données d'une page probable.

Anti-pattern

Termes liés

Sources

• react.dev/blog/2025/10/01/react-19-2
• react.dev/reference/react/Activity