Dans certains cas certains composants vont avoir besoin de transférer des informations à des systèmes externes à React. Dans ce cas là on va pouvoir utiliser la fonction useEffect.
Cette fonction prendra en paramètre une fonction qui sera appelée lorsque la valeur d'au moins une des dépendances change (passée sous forme de tableau en 2 paramètres). Par exemple il est possible de mettre à jour le titre d'une page en fonction de l'état du composant.
useEffect(() => {
document.title = title
}, [title])L'utilisation de cette fonction doit être limitée à la gestion des effets de bord et il sera important de respecter les règles suivantes :
On ne fera pas de changement d'état directement à la racine du useEffect.
// On ne fera jamais ça !
useEffect(() => {
setTitle(`Editer ${firstname} ${lastname}`)
}, [firstname, lastname])
// On peut simplement créer une variable
const title = `Editer ${firstname} ${lastname}`En revanche vous pouvez par exemple utiliser un changement d'état dans le cas d'une opération asynchrone.
useEffect(() => {
fetch('url')
.then(r => r.json())
.then((data) => setData(data))
}, [])Un useEffect qui n'aurait pas de dépendance est un use effect qui ne sera appelé que lors du rendu initial du composant.
Penser à nettoyer
Dans certains cas on peut utiliser le useEffect pour venir brancher un écouteur sur un événement global (par exemple écouter le défilement dans la page). Dans ce cas là il sera impératif de penser à supprimer l'écouteur d'événements lorsque le composant est supprimé. Pour cela il faudra retourner une fonction dans la fonction d'appel du useEffect.
useEffect(() => {
const handler = () => console.log('scroll')
window.addEventListener('scroll', handler)
return () => window.removeEventListener('scroll', handler)
})De manière générale, il faut penser que les composants doivent nettoyer tous les effets de bord qu'ils enregistrent.
Attention aux dépendances
Enfin un dernier point . Lors de l'utilisation d'un useEffect dès qu'une variable provenant du composant est utilisée elle devra impérativement être ajoutée au tableau de dépendance. On pourra cependant omettre les fonctions de changement d'état qui ne changent jamais (comme par exemple le setter reçu dans le cas du useState).
