Si comme moi vous avez déjà voulu afficher ou cacher un composant dans React, vous avez sûrement fait quelque chose comme ça :
code
{isShowingSidebar && <Sidebar />}
Le hic ? Chaque fois que vous cachez le composant, React le démonte complètement. Tout l'état interne disparaît, le DOM est réinitialisé… Bref, tout est perdu 😅. Moi, ça m'a déjà fait perdre pas mal de temps !
Mon nouveau coup de cœur : <Activity>
Avec React 19.2, on peut enfin faire ça :
code
<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
<Sidebar />
</Activity>
Et là… magie :
- Le composant est juste caché via CSS (
display: none) - L'état interne et le DOM restent intacts
- Quand vous le réaffichez, tout est exactement comme avant
Fini les remounts qui font tout perdre. Tout est fluide, rapide, et simple à gérer.
Si vous voulez en savoir plus et voir tous les détails de <Activity>, vous pouvez consulter la documentation officielle ici : React Activity
Testez-le vous-même et dites-moi en commentaire ce que vous en pensez !
Commentaires