React JS et ses Hooks, combinaison gagnante du Javascript ?

La programmation est la base d’Internet et son amélioration constante que se soit pour faciliter le travail des développeurs, le rendre plus rapide, plus intuitif ou pour rendre les sites Web plus fluides et plus intelligents est toujours une bonne nouvelle.
En 2018 c’est Facebook qui a présenté l’ajout d’une fonction à React lors de la ReactConf présenté par Sophie Alpert et Dan Abramov. : les hooks.
Dans quel but ? Tout composant devrait pouvoir s’écrire sous une forme fonctionnelle pure.
React était le framework front-end le plus populaire et le plus apprécié de l'écosystème JavaScript au moment de la sortie de ses Hooks.
Mais malgré sa position de leader, l’équipe React a quand même jugé nécessaire de créer et de mettre en place des hooks.
Du coup, les hooks de React sont apparus dans la version 16.7.0 alpha.
Ces nouvelles fonctions permettent d’utiliser toutes les fonctionnalités des classes React et grâce à eux on peut développer une application React uniquement faite des composants fonctionnels.
Sachez toutefois que les composants fonctionnels utilisant les hooks sont tout à fait compatibles avec des classes React.
Dan Abramov a fourni une introduction complète à l’API, et répond à la question : comment et pourquoi le framework que beaucoup de développeurs utilisent a évolué pour devenir ce qu’il est aujourd’hui ?
Si vous voulez connaître sa réponse (et que vous parlez anglais), regardez son discours d’ouverture lors de la ReactConf 2018 présentant les fameux hooks.
 
 
Depuis, les hooks ont rapidement gagné en popularité parmi les développeurs React.
Grâce aux hooks, on peut créer des composants avec état sans classes JavaScript et étendre le React.Component.
Ils ont rendu le code plus simple, plus concis et plus lisible.
Ils permettent de réutiliser votre code facilement, d’écrire des composants de manière plus intuitive et d’éliminer le cycle de vie des composants
 

Quelles versions de React incluent les hooks ?
Depuis la version 16.8.0, React embarque une implémentation stable de React Hooks pour :

• React DOM
• React Native
• React DOM Server
• Le moteur de rendu de test de React
• Le moteur de rendu superficiel de React

À noter que pour activer les hooks, tous les paquets React doivent être en version 16.8.0 ou supérieure.
Les hooks ne fonctionneront pas si vous oubliez de mettre à jour React DOM, par exemple.
 

Les principaux atouts des hooks
L’état dans les composants fonctionnels.
Avant les hooks, nous ne pouvions pas utiliser l’état dans les composants fonctionnels.
C’est-à-dire que si vous aviez un composant fonctionnel bien conçu et testé qui devait soudainement stocker l’état, vous étiez coincé en devant refactoriser votre composant fonctionnel en un composant de classe.
Avec les hooks qui autorisent l’état dans les composants fonctionnels, cela signifie que nous n’avons pas à refactoriser nos composants de présentation.
Plus de composants de classe maladroits
Soyons objectifs, les composants de classe sont livrés avec beaucoup de passe-partout. Constructeurs, liant, utilisant « this » partout. 
L’utilisation de composants fonctionnels en supprime une grande partie, de sorte que notre code devient plus facile à suivre et à maintenir.
Un code plus lisible.
Comme les hooks permettent d’utiliser des composants fonctionnels, il y a moins de code qu’avec les composants de classe.
Cela rend donc le code plus lisible.
Et heureusement, car c’était l’idée de base !
Plus besoin de se soucier de la liaison des fonctions, ni de se souvenir de ce à quoi « this » se rapporte, et ainsi de suite.
Il suffit juste maintenant de se focaliser sur l’écriture du code.
 

Les principaux hooks
UseState.
L’un des hooks les plus utiles est useState. Il nous permet d’avoir un state dans nos function components et nous débloque donc beaucoup plus de possibilités !
Le state est une pierre angulaire de l’écosystème React.
Débutons l’exploration des hooks en commençant par le hook que vous utiliserez donc le plus.
Voici un composant de classe avec un state.

Avec React Hooks, il est possible de réécrire ce composant et de supprimer beaucoup de choses, ce qui facilite la compréhension (et le travail) :

Comme vous le voyez, il y a moins de code !
À noter que lors de l’appel à useState, la valeur passée en paramètre est la valeur initiale que l’on souhaite donner à notre variable.
Fondamentalement, il utilise l’affectation de déstructuration pour les tableaux.
La fonction useState() nous offre 2 choses :

• Une variable pour contenir la valeur de l’état, dans ce cas, elle est appelée count-
• Une fonction pour changer la valeur, dans ce cas, elle est appelée setCount.

Vous pouvez les nommer comme vous le souhaitez :

Et vous pouvez les utiliser dans tout le code comme des variables/fonctions normales :

Remarquez que sur le hook useState en haut, nous déclarons/déstructurons 2 choses :

• Counter : une valeur qui tiendra notre valeur d’état
• SetCounter : une fonction qui va changer notre countvariable

Et au fur et à mesure que vous allez poursuivre votre code, vous verrez cette ligne :

Voici un exemple de la façon dont vous pouvez utiliser une variable de hook d’état. Dans votre JSX, placez votre count variable à l’intérieur des crochets {} pour l’exécuter en tant que JavaScript, et à son tour la valeur count est rendue sur la page. En comparant cela à l’ancienne façon « basée sur les classes » d’utiliser une variable d’état :

Vous remarquerez que nous n’avons plus besoin de nous soucier de l’utilisation this, ce qui facilite la vie (enfin au moins le développement).
Par exemple, l’éditeur de code VS vous avertira si {count} n’est pas défini, ce qui vous permettra de détecter les erreurs tôt.
Alors qu’il ne saura pas si {this. state. count} est indéfini jusqu’à ce que le code soit exécuté.
Ligne suivante !

Ici, nous utilisons la fonction setCount (celle que nous avons déstructurée/déclarée à partir du hook useState ()) pour changer la countvariable.
Lorsque le bouton est cliqué, il faut mettre à jour la variable count par 1.
Comme il s’agit d’un changement d’état, cela déclenchera un rendu et React mettra à jour la vue avec la nouvelle valeur countvaleur pour vous.
Comment définir l’état initial ? Vous pouvez définir l’état initial en passant un argument à la syntaxe useState().
Cela peut être une valeur codée en dur :

Ou être extrait des accessoires :

Cela définira la valeur count quelle que soit la valeur props. initialValue.
Cela résume useState().
Le meilleur dans tout ça, c’est que vous pouvez utiliser des variables/fonctions d’état comme toute autre variable/fonction que vous écririez vous-même.
 

Comment gérer plusieurs variables d’état ?
Voilà un autre aspect intéressant des hooks : on peut en avoir autant que l’on veut dans un composant !

Comme vous pouvez le voir, nous avons 3 objets d’état séparés. Si nous voulons, par exemple, mettre à jour l’âge, nous aurions juste à appeler la fonction setAge (). Idem pour le nombre et le titre.
L’avantage ? Nous ne sommes plus liés à l’ancienne méthode de composant de classe où nous avions un objet d’état massif stocké à l’aide de setState () :

Attention aux pièges Nous sommes d’accord, le hook useState est idéal pour stocker l’état pour des valeurs simples et contrairement à l’état des classes, vous n’êtes pas limité à un seul objet.
Avec useState, vous créez des valeurs distinctes pour chaque cas.
Il n’y a pas de limite stricte et useState peut stocker des objets, mais rappelez-vous une chose : dans les composants de classe, lorsque vous mettez à jour l’état à l’aide de this. setState, il est fusionné avec l’ancien.
Avec useState, la fonction de mise à jour remplace l’ancien état par un nouveau. Il n’y a pas de fusion à la fin.
Donc, si vous mettez à jour l’état de cette manière, vous perdez toutes vos données précédentes.
Pour remédier à ce problème au lieu de simplement transmettre de nouvelles valeurs, vous pouvez transmettre une fonction qui reçoit l’état précédent.
 

UseEffect - un hook React pour les gouverner tous
Lorsque vous utilisez des hooks et des composants fonctionnels, vous n’avez plus accès à des méthodes React du cycle de vie comme componentDidMount, componentDidUpdate et ainsi de suite.
Mais ne paniquez pas, React a prévu un hook à utiliser !
Le deuxième hook important useEffect !
Lui nous permet d’injecter dans nos function components la notion de lifeCycle hook utilisée dans tous les frameworks front-end récents.
En React, on les connaît sous le nom de ComponentWillMount, ComponenentWillReceiveProps, ComponentWillUpdate, etc…
On se sert principalement de ces fonctions pour récupérer des données (call API), mettre à jour des variables ou encore faire des modifications sur le DOM.
UseEffect nous permet de combiner 3 lifecycle hooks de React, componentDidMount, componentDidUpdate et componentWillUnmount.
UseEffect est celui qui va contenir les « effets secondaires ».
Mais qu’est ce qu’est réellement un effet secondaire ?
La réponse vous aidera à comprendre ce que useEffect() fait et pourquoi il est utile.
L’explication de base est :
« En programmation, un effet secondaire est lorsqu’une procédure modifie une variable hors de sa portée »
Plus simplement, cela signifie « lorsque les variables ou l’état d’un composant changent en fonction de quelque chose d’extérieur ».
Exemples :

• Lorsqu’un composant reçoit de nouveaux accessoires qui changent d’état
• Lorsqu’un composant effectue un appel API et fait quelque chose avec la réponse (par exemple, change l’état)

Alors pourquoi s’appelle-t-il un effet secondaire ?
Nous ne pouvons jamais être sûrs à 100% des accessoires que nous allons recevoir ou de la réponse d’un appel API.
Et nous ne pouvons pas être sûrs de la manière dont tout cela va affecter notre composant.
Alors, nous pouvons écrire du code pour valider et gérer les erreurs, mais en fin de compte, nous ne pourrons pas être sûrs des effets secondaires.
Par exemple, lorsque nous changeons d’état, sur la base de quelque chose d’extérieur, cela est connu comme un effet secondaire.
Revenons maintenant au hook useEffect.
Lors de l’utilisation de composants fonctionnels, nous n’avons plus accès aux méthodes de cycle de vie comme componentDidMount(), componentDidUpdate(), etc. Donc, les hooks useEffect remplacent les hooks actuels de React Life Cycle. Comparons un composant basé sur une classe qui utilise le hook useEffect :

Et maintenant en utilisant useEffect () :

Alors avant de continuer, il est important de savoir que, par défaut, le hook useEffect s’exécute sur chaque rendu.
Ainsi, à chaque fois que l’état change dans votre composant ou que votre composant reçoit de nouveaux accessoires, il sera de nouveau rendu et provoquera la réexécution du hook useEffect.
Exécuter un effet une fois (componentDidMount).
Si les hooks s’exécutent à chaque fois qu’un composant est rendu, comment pouvons-nous nous assurer qu’un hook ne s’exécute qu’une seule fois lorsque le composant est modifié ?
Exemple : si un composant récupère des données à partir d’une API, nous ne voulons pas que cela se produise à chaque fois que le composant effectue un nouveau rendu.
Le hook useEffect() prend donc un deuxième paramètre en compte, un tableau, contenant la liste des choses qui provoqueront l’exécution du hook useEffect.
Lorsqu’il est modifié, il déclenchera le hook d’effet.
La clé pour exécuter un effet une fois est de passer dans un tableau vide :

Cela signifie donc que le hook useEffect s’exécutera normalement sur le premier rendu.
Cependant, lorsque votre composant est réexécuté, useEffect comprendra qu’il l’a déjà exécuté, qu’il n’y a rien dans le tableau et que donc il n’a pas à recommencer.
Donc il ne fait rien.
En résumé, si le tableau est vide = hook useEffect s’exécute une fois lors du montage
Utiliser des effets lorsque les choses changent (componentDidUpdate)
Nous venons de voir comment nous assurer qu’un hook useEffect ne s’exécute qu’une seule fois, mais qu’en est-il lorsque notre composant reçoit un nouvel accessoire ? Ou que nous voulons exécuter du code lorsque l’état change ?
Et bien les hooks nous permettent également de faire ça.

Ici, nous transmettons des éléments au tableau useEffect, à savoir props.name.
Dans ce scénario, le hook useEffect s’exécutera sur la première charge comme toujours.
Chaque fois que votre composant recevra un nouveau nom prop de son parent, le hook useEffect sera déclenché et le code qu’il contient s’exécutera.
On peut faire la même chose avec les variables d’état :

Chaque fois que la variable name change, le composant rerenders et le hook useEffect s’exécuteront et afficheront le message.
Et puisqu’il s’agit d’un tableau, nous pouvons y ajouter plusieurs choses :

Cette fois, lorsque la variable name d’état change ou qu’il y a des modifications sur les name prop, le hook useEffect s’exécute et affiche le message de la console.
Pouvons-nous utiliser componentWillUnmount () ?
Pour exécuter un hook alors que le composant est sur le point de se démonter, il suffit de renvoyer une fonction depuis le hook useEffect : useEffect(() => { console.log (« running effect ») ; return () => {console.log (« unmounting ») ;} ;});
Puis-je utiliser différents hooks ensemble ?
Bien sûr, vous pouvez utiliser autant de hooks que vous le souhaitez dans un composant et les mélanger et les assortir comme vous le souhaitez :

Alors chez Fidesio nous avons une super développeuse REACT.

En plus d’être adorable, super sympa, toujours souriante et de bonne humeur, ce rayon de soleil de la team dev est très douée dans son métier.

Nous n’avons donc pas résisté à l’envie de lui demander ce qu’elle pensait des hooks !

Petite interview de Mariia NESTEROVA

Est-ce que tu trouves que le développement est plus facile depuis l’apparition des hooks ?

« Oui, absolument !
J’ai commencé à travailler avec React.js il y a quelques années avec les classes. Dans les classes on était obligé de respecter une structure spécifique assez complexe et suivre une logique de classes. Par exemple, on devrait définir les “life cycle events” (i. e. componentDidMount, componentDidUnmount, componentDidUpdate), avec les hooks on centralise toute la logique dans un seul hook “useEffect” et ça sera exécuté après chaque render de composant.
En plus, avec les hooks on n’a plus besoin du Constructor et on n’utilise plus “this”, les constants sont appelés directement par leur nom.

Pour moi, il y a un autre avantage - le code est maintenant beaucoup plus propre, compact et facile à lire. »

Si tu voyais un défaut dans le fait de travailler avec les hooks, ce serait lequel ?

« Au début, quand je devais passer mes projets des classes aux hooks, le défaut que j’ai remarqué c’était les librairies existantes écrites toujours en classes.
Maintenant ce n’est plus le cas vu que la majorité de librairies de React sont refaites en hooks aussi.
Personnellement, je ne trouve pas beaucoup de défauts, mais il y a des petits détails désagréables pour les développeurs habitués aux classes.
Par exemple : le useState hook. Ici imaginons qu’on utilise un objet avec 3 Keys dans un state, et après on appel une méthode setState quelque part dans notre composant, mais un d’eux veut ne veut updater qu’une Key dans un objet.
Avec le hook useState, dans ce cas le state sera updaté totalement et on perdra deux autres Keys.
C’est logique et compréhensible par rapport à la fonctionnalité, mais ça pouvait être frustrant pour quelqu’un qui était habitué aux classes : const [cat, setCat] = useState({ name: ‘Tom’, color: “grey”, age : “5’}) return cat → donnera : {name: ‘Tom’, color: “grey”, age : “5’}… dans le composant si on veut updater que l’âge : setCat ({age : 6}) → return cat → {age : 6} et pour le updater correctement il faut écrire : setCat( {name: cat.name, color: cat.color, age: 6} ) → return cat → {name: ‘Tom’, color: “grey”, age : 6}. “

Comment imagines-tu l’avenir de React ? Quelle évolution après les hooks ?

React est une bibliothèque stable et riche, qui est utilisée dans un grand nombre de sites.
La communauté React est large et on voit des contributions régulières par beaucoup de développeurs.
On voit aussi que React est assez flexible, je veux dire, il change positivement pour suivre les besoins des utilisateurs et s’adapte bien aux nouvelles conditions.
À mon avis, React restera dans le monde du développement Java Script encore pour longtemps.
Il existe déjà un framework très récent pour React : NextJS (https://nextjs.org/) qui sert à simplifier la création d’une nouvelle application React.
Peut-être que le futur est dans le développement de plus de frameworks comme ça pour React ?

Les hooks sont une petite révolution à leur niveau dans le monde de React, en nous permettant de simplifier considérablement les composants de notre application, de simplifier le code et de résoudre pas mal de soucis inhérents à React.

Cependant, lors de leur utilisation, il y a des éléments qui doivent être pris en compte.

Si vous suivez bien les consignes, votre application sera moins sujette aux bogues et sera également plus compréhensible pour les autres développeurs.

FIDESIO (et Mariia) vous accompagne dans la création de votre site avec React et notre agence Web est capable de répondre à tous vos besoins et d’élaborer une véritable stratégie digitale.
N’hésitez pas à nous contacter.