1.1. Les limites des composants de fonctions

En fait, les composants déclarés avec des classes sont généralement plus long à écrire, car ils proposent deux fonctionnalités supplémentaires par rapport aux composants déclarés avec des fonctions :

• Gestion du state : Un state signifie un « état ». Concrètement, cela permet de sauvegarder des données dans votre composant, qui sont directement synchronisé avec votre DOM virtuel, écrit en JSX. Ainsi, dès que vos données sont modifiées, l’interface de votre application est automatiquement mis à jour pour les utilisateurs. Plutôt pratique !
• Cycle de vie des composants: Un composant de déclaré avec une classe permet d’intervenir sur le cycle de vie d’un composant React, comme la création de ce composant, sa suppression du DOM virtuelle, etc. Nous n’avons pas encore vu cette fonctionnalité non plus, mais c’est plutôt pratique pour implémenter un comportement spécifique dans notre composant.

A priori, on pourrait se demander pourquoi on n’utilise pas tout le temps des composants de classe, puisqu’ils sont plus complets, et offrent d’avantage de fonctionnalités. Mais il faut savoir que les composants de fonction ont également une utilité. En effet, React recommande d’utiliser le plus possible les composants de fonction, lorsque c’est possible, car :

• Les composants de fonctions sont dits « purs » : C’est-à-dire que pour telles données entrantes, alors le composant affichera toujours la même chose. Pour faire simple, son comportement est parfaitement prévisible, et n’a pas de dépendances extérieures. Et ça, on adore en informatique.
• Les composants de fonctions sont plus performants : Le fait que ses composants soient « purs » et qu’ils proposent moins de fonctionnalités, cela les rends plus performants. Ce point est loin d’être négligeable, surtout lorsqu’on considère qu’une application React n’est qu’un assemblage d’une multitude de composants.
• Les composants de fonctions sont plus concis et plus lisibles : Cela présente un avantage certain lorsque plusieurs développeurs interviennent sur la même application.

Donc, imaginez que vous êtes un développeur React un instant. Tant que vous n’avez pas besoin de fonctionnalités avancées, vous utilisez des composants de fonction, comme recommandé par React dans ce genre de situation. Ensuite, au fur et à mesure de vos développements, et de l’ajout de nouvelles fonctionnalités, vous devez refactoriser certains composants de fonction de votre application en composants de classe, pour ajouter le state ou la gestion du cycle de vie… Et vous devez faire cela régulièrement, ce qui devient vite très pénible…

Pour résumer, nous avons ceci pour le moment :

Heu… c’est infernal ! On n’a même pas commencé à développer quoi que ce soit, et c’est déjà TROP compliqué !! 😤

Ne vous inquiétez pas, vous n’êtes pas du tout le seul. En fait, cette problématique est tellement répandue, que l’équipe de React elle-même a proposé une nouvelle solution pour répondre définitivement à cette problème : les Hooks. Vous verrez, tout va devenir (un peu) plus simple.

Dans le jargon React, sachez que les composants de fonction sont également appelés Stateless components. Et les composants de classe sont appelés Statefull components. Bien sûr, cela désigne la même chose, mais ne soyez pas surpris si vous tombez sur ces termes sur Internet.