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.
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
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}/ width="" height=""> : 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.
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.
