Comprendre le hook useEffect en ReactJS

L'Équipe Alphorm
L'Équipe Alphorm Ajouter un commentaire 12e lecture en min

Dans notre article précédent, nous avons exploré le hook useState Reactjs, notamment la manipulation des props à travers les composants. Aujourd’hui, nous allons approfondir notre compréhension de ReactJS en nous concentrant sur le hook useEffect Reactjs, essentiel depuis la version 16.8 pour la gestion des effets de bord dans les composants fonctionnels. Cet article vous guide à travers l’utilisation du hook useEffect avec des exemples pratiques et des exercices pour solidifier vos connaissances.

Présentation du hook useEffect en ReactJS

Jusqu’à présent, nous avons discuté du rendu d’une application React, c’est-à-dire que lorsqu’une modification intervient dans une prop (propriété) ou dans le state (état), le composant concerné ainsi que ses enfants sont re-renderisés.

Cependant, imaginez maintenant comment faire si l’on souhaite effectuer une action qui ne fait pas partie du retour de la fonction de rendu ? Comment gérer une action qui intervient après que React a mis à jour le DOM ?

Eh bien, ces types d’actions sont appelés des effets de bord, et pour les gérer, nous disposons du hook useEffect Reactjs. Comme vous le savez déjà, le hook useState nous permet de déclarer un état, et maintenant nous avons le second hook, useEffect, qui nous permettra d’effectuer une action à un moment donné du cycle de vie de nos composants.

Reprenons notre dernière démonstration sur le hook useState qui nous permet d’afficher ou de cacher une image. Dans ce scénario, si un changement d’état est détecté sur notre page, le hook useEffect Reactjs entre en jeu pour gérer correctement le cycle de vie de notre composant

Déclaration de hook useEffect

Comme on bien mentionné qu’on reprendre notre dernière démonstration sur le hook useState, voyons maintenant la modification pour déclarer le hook useEffect : image.js

				
					import {useState,useEffect} from 'react';
import '../styles/image.css'
export default function Image() {
useEffect(()=>{
//instructions
},[])
				
			

Pour utiliser le hook useEffect Reactjs, nous devrons l’importer depuis la bibliothèque reactJS comme nous avons fait en useState sur cette ligne :

				
					import {useState,useEffect} from 'react';
Et la déclaration en question est sur cette ligne :
useEffect(()=>{
//instructions
},[])
				
			

Le hook useEffect Reactjs prend une fonction callback en premier argument, qui contient les instructions à exécuter lorsque le composant est monté (ou dans ce cas, lorsque les dépendances spécifiées changent). Le deuxième argument, [] dans ce cas, indique que cette fonction doit être exécutée uniquement une fois après le montage du composant.

Dans le code actuel, la section des instructions dans useEffect est actuellement commentée (//instructions). Voila comment déclarer useEffect, passons maintenant à l’utilisation.

Utilisation du hook useEffect ReactJS

On va voir maintenant comment implémenter la gestion des mises à jour. Dans notre composant image.js :

				
					import {useEffect, useState} from 'react';
import '../styles/image.css'
export default function Image({source}) {
const [voir,setVoir]      = useState(true)
const [ bt,setBt] = useState('cacher')
const [imageSrc,setImageSrc] = useState('')
useEffect(()=>{
SetImagesrc(source)
},[source])
function afficher(){
setVoir(!voir)
if(bt == 'cacher'){
setBt('voir')
}else{
setBt('cacher')
}
}
return(
<section>
{
(voir)?
<img src={imageSrc}/> : null
}
<button onClick = {afficher}>{bt}</button>
</section>
)
}
				
			

Donc, pour modification qu’on a apporté :

setImagesrc(source)’ : À l’intérieur de la fonction callback de useEffect, ‘setImagesrc’ est appelé. Il s’agit d’une fonction qui met à jour l’état local imagesrc avec la nouvelle valeur de source.

[source]: Le tableau [source] spécifie que le useEffect doit être déclenché uniquement lorsque la valeur de source change. En d’autres termes, la fonction callback sera exécutée uniquement si source est différent de sa valeur précédente.

Pour approfondir vos connaissances et maîtriser pleinement ReactJS, découvrez notre formation vidéo sur React.

Exercice pratique avec useEffect ReactJS

Après avoir exploré la théorie, nous allons maintenant passer à la pratique et aborder un nouvel exercice. Dans cette phase d’application des concepts récemment étudiés sur le hook useEffect Reactjs, nous allons travailler ensemble sur le développement d’un exercice visant à afficher l’heure actuelle en temps réel.

Heure actuelle affichée en temps réel via hook UseEffect ReactJS
Exemple d'utilisation du hook useEffect pour l'heure en temps réel.

Notre but est d’afficher l’heure en temps réel, avec une mise à jour chaque seconde, et cela devient simple grâce à l’utilisation du hook useEffect Reactjs. Sans plus attendre, commençons à créer le composant : src/component/heure.js

				
					export default function Heure(){
return(
<div>
<h3>Heure actuelle</h3>
<p>Heure:</p>
</div>
)
}
				
			


Importer le dans le fichier index.js

				
					import React from 'react';
import ReactDOM from 'react-dom/client';
import Heure from './component/heure';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Heure />
</React.StrictMode>
);
				
			


Vous démarrez l’application en exécutant la commande :

				
					npm start
				
			


Une fois que tout est en ordre, vous obtenez ce résultat sur votre navigateur.

Affichage du résultat d'une application en utilisant le hook UseEffect Reactjs après l'exécution de npm start
Vue d'une application React lancée avec npm start


Par la suite , on va utiiser de props dans notre composant pour bien pratiquer les notions que nous avons appris précédemment .

Voyons la modification auniveau de notre composant Heure alors :

Src/component/heure.js

				
					import {useState} from "react"
export default function Heure({children}){
//declaration de l'heure actuelle
let heureActuelle = new Date();
// Declaration d'un etat heure
const [heure,setHeure] = useState(heureActuelle)
return(
<div>
<h3>{children}</h3>
<p>{heure.toLocaleTimeString()}</p>
</div>

)
}
				
			

Importation du hook useState

				
					import {useState} from "react"
				
			


Cette ligne importe le hook useState depuis la bibliothèque React. Le hook useState est utilisé pour déclarer un état local dans un composant fonctionnel.

Définition du composant Heure

				
					export default function Heure({children})
				
			


Le composant est défini comme une fonction React appelée Heure. Il prend un prop children en tant que paramètre, qui peut contenir des éléments enfants à afficher à l’intérieur du composant.

Déclaration de l'heure actuelle 

				
					let heureActuelle = new Date();
				
			


Une instance de l’objet Date est créée pour représenter l’heure actuelle.

Déclaration d'un état avec le hook useState

				
					const [heure,setHeure] = useState(heureActuelle) ;
				
			


Le hook useState est utilisé pour déclarer une variable d’état heure et une fonction setHeure qui permettra de mettre à jour cet état. La valeur initiale de l’état est définie comme étant l’heure actuelle.

Rendu JSX avec le hook UseEffect Reactjs

				
					return(
<div>
<h3>{children}</h3>
<p>{heure.toLocaleTimeString()}</p>
</div>
)
				
			


Le composant retourne du JSX qui inclut un élément <div> contenant un titre <h3> (qui affiche le contenu des enfants) et un paragraphe <p> qui affiche l’heure actuelle sous forme de chaîne de caractères formatée en utilisant toLocaleTimeString().

Importer maintenant notre composant dans le fichier index.js pour l’appeler :

Index.js :

				
					import React from 'react';
import ReactDOM from 'react-dom/client';
import Heure from './component/heure';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Heure children='Heure actuelle'/>
</React.StrictMode>
);
				
			

Rendu du composant Heure dans la racine

				
					root.render(
<React.StrictMode>
<Heure children='Heure actuelle'/>
</React.StrictMode>
);
				
			


Le composant Heure est rendu dans la racine préalablement créée, en transmettant une valeur de prop children au composant enfant.

Et en démarrant votre application :

				
					npm start
				
			


Cela vous donne :

Démarrage de l'application React avec la commande npm start.
Lancement de l'application React via npm start


Ajouter un peu de styles pour la mise en page de notre page maintenant :

Src/styles/heure.css

				
					div{
background-color:bisque;
padding: 25px;
border-radius:9px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
div p{
font-family: Georgia, 'Times New Roman', Times, serif;
color: brown;
}
				
			

Index.css 

				
					body {
background-color:chocolate;
height : 100vh;
display: flex;
margin: 0;
justify-content: center;
align-items: center;
}
				
			


En important ces fichiers dans le fichier respectifs :Index.js :

				
					import React from 'react';
import ReactDOM from 'react-dom/client';
import Heure from './component/heure';
import './styles/index.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Heure children='Heure actuelle'/>
</React.StrictMode>
);
				
			


Src/component/heure.js

				
					import {useState} from "react"
import '../styles/heure.css'
export default function Heure({children}){
//declaration de l'heure actuelle
let heureActuelle = new Date();
// Declaration d'un etat heure
const [heure,setHeure] = useState(heureActuelle)
return(
<div>
<h3>{children}</h3>
<p>{heure.toLocaleTimeString()}</p>
</div>
)
}
				
			


Tout cela nous donne un résultat comme ceci :

Écran montrant le résultat final de l'application après l'utilisation de hook UseEffect Reactjs dans le navigateur.
Visualisation du résultat final de l'application React

Nous sommes sur le point d’atteindre notre objectif. La dernière étape consiste simplement à ajouter la fonctionnalité pour afficher l’heure en temps réel, c’est là que le hook useEffect  Reactjs entre en jeu. Pour cela, examinons les modifications dans notre composant heure.js.

				
					import {useEffect, useState} from "react"
import '../styles/heure.css'
export default function Heure({children}){
//declaration de l'heure actuelle
let heureActuelle = new Date();
// Declaration d'un etat heure
const [heure,setHeure] = useState(heureActuelle)
useEffect(()=>{
setInterval(()=>{
setHeure(new Date)
},[heure])
})
return(
<div>
<h3>{children}</h3>
<p>{heure.toLocaleTimeString()}</p>
</div>
)
}
				
			


Il y a l’extrait de code :

				
					useEffect(()=>{
setInterval(()=>{
setHeure(new Date)
},[heure])
})
				
			


UseEffect
: useEffect est un hook qui permet d’effectuer des effets de bord dans un composant fonctionnel React. Il est généralement utilisé pour gérer des opérations telles que des appels réseau, des abonnements à des événements, ou dans ce cas, des mises à jour périodiques.

setInterval : setInterval est une fonction JavaScript qui exécute une fonction à intervalles réguliers, définis en millisecondes.

Mise à jour de l’heure : À l’intérieur de la fonction passée à setInterval, setHeure(new Date()) est appelé. Cela met à jour l’état de l’heure avec une nouvelle instance de l’objet Date, représentant ainsi l’heure actuelle.

 

Dépendance heure dans le tableau de dépendances de useEffect Reactjs

useEffect prend un tableau de dépendances en deuxième argument. Ici, [heure] est spécifié, ce qui signifie que l’effet (la fonction à l’intérieur de useEffect) ne sera réexécuté que si la valeur de heure change.

Démarrer votre application maintenant pour voir le résultat :

				
					Npm start
				
			
Écran de démarrage de l'application après l'utilisation de hook UseEffect React suite à des modifications
Nouveau démarrage de l'application React après des mises à jour


Mission accomplie, notre tâche est achevée avec succès.

Conclusion

En conclusion, le hook useEffect en ReactJS est un outil puissant pour gérer les effets de bord dans les composants fonctionnels. Que vous débutiez ou que vous cherchiez à perfectionner vos compétences en ReactJS, savoir utiliser useEffect efficacement est crucial. Grâce aux exemples et exercices pratiques présentés, vous devriez maintenant être capable de gérer les effets de bord dans vos applications ReactJS. Continuez à explorer et à expérimenter pour maîtriser pleinement cette fonctionnalité essentielle de ReactJS avec les images ReactJS.

ÉTIQUETÉ : Reactjs
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.
Laisser un commentaire