Composant d’activité : rendu conditionnel dans React 19.

Introduction

Traditionnellement, nous utilisions des opérateurs ternaires ou des attributs de style CSS (affichage et visibilité) pour implémenter le rendu conditionnel dans un composant React, mais le problème avec cette approche était qu’elle entraînait une perte d’état interne ou n’était pas favorable aux performances. Avec React 19, un nouveau composant appelé Activité a été introduit pour implémenter le rendu conditionnel tout en conserver et mettre en pause l’état interne du composant. Auparavant, il était utilisé pour gérer l’une ou l’autre des deux approches :

1. Opérateurs ternaires (?, && )

Opérateurs ternaires pour restituer conditionnellement les composants

Avec les opérateurs ternaires, l’approche était claire et simple pour la logique à deux composants, mais devenait compliquée si plusieurs composants devaient être commutés. De plus, l’inconvénient majeur était interne Perte d’État

2. Propriété CSS

Rendu conditionnel via les propriétés de style CSS

Avec les propriétés CSS telles que l’affichage ou la visibilité, il préserve l’état, mais comme le composant n’est jamais vraiment mis en pause, son implémentation pour la commutation de composants volumineux peut s’avérer coûteuse.

Composante d’activité Mise en œuvre et états

Le composant Activity résout ces deux problèmes et fournit un terrain d’entente pour la mise en œuvre d’une approche de rendu conditionnel respectueuse des performances. L’utilisation du composant Activity est assez simple ; nous avons juste besoin de l’importer, et il utilise un accessoire appelé « mode » qui contrôle la visibilité du contenu enfant. Il a deux valeurs valides : visibles et cachés.

Composant parent avec Activity Wrapper

Valeur visible –

Montrer l’enfant avec la valeur de l’accessoire – visible

• s’affiche à l’écran
• garde son état
• les effets (useEffect) fonctionnent normalement
• DOM est présent

Valeur cachée –

Masquer le composant enfant avec un accessoire passé comme caché dans le wrapper d’activité

• devient invisible (affichage : aucun)
• l’état est préservé (ne se réinitialise PAS !)
• les effets sont suspendus – React exécute le nettoyage
• en redevenant visible, les effets se reproduisent avec l’ancien état
• DOM est temporairement supprimé de la mise en page (non détruit)

Restauration du composant enfant avec accessoire visible. L’état de comptage est toujours conservé

Même lorsque le composant enfant est masqué et ramené, nous pouvons voir que l’état interne du composant est conservé.

Quand utiliser quoi –

Conclusion

Le composant d’activité est un excellent moyen d’implémenter des fonctionnalités telles que plusieurs onglets, panneaux latéraux, assistants et bien plus encore avec des lignes de code réduites que nous pouvons généralement implémenter avec le rendu conditionnel traditionnel, et il améliore les performances puisque les effets React sont suspendus. Bien qu’il ne remplace pas complètement le rendu conditionnel traditionnel, car certains scénarios nécessitent la réexécution d’effets ou la gestion de transitions, il s’agit d’un ajout important dans React 19 pour les cas où la préservation de l’état interne avec un minimum de code est essentielle.

VOUS TROUVEZ CELA UTILE ? PARTAGEZ-LE