Gérer les effets de bord dans une application React peut devenir complexe, surtout lorsque des composants se mettent à jour fréquemment.
Sans une gestion appropriée, cela peut entraîner des comportements inattendus, des bugs difficiles à corriger et une application difficile à maintenir, ralentissant ainsi le développement.
Le hook useEffect offre une solution efficace pour contrôler ces effets de bord. Cet article vous montre comment utiliser useEffect pour optimiser le cycle de vie de vos composants avec des exemples pratiques et détaillés.
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.
Formation React 18 - Maîtriser la Création d'Interfaces Interactives
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
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.
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.
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 :
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 :
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
Mission accomplie, notre tâche est achevée avec succès.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
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.
