Les hooks avancés dans React

Introduction:

Dans le développement d'applications React, la compréhension et la maîtrise des Hooks sont. Après avoir vu les bases des Hooks dans l'article précédent, nous verrons dans cet article un concept plus avancé : useEffect. Ce Hook offre des fonctionnalités avancées pour gérer les effets dans vos composants React.

Utilisation du Hook useEffect :

Le Hook useEffect vous permet d'effectuer des effets secondaires dans vos composants.

C'est utilisé par exemple pour récupérer des données, mettre à jour directement le DOM et utiliser des timers.

useEffect accepte deux arguments. Le deuxième argument est facultatif.

useEffect(<fonction>, <dépendance>)

La fonction de rappel contient le code à exécuter lors du rendu du composant ou lorsque la valeur de la dépendance change. C'est là que vous effectuez les effets secondaires.

Le tableau de dépendances spécifie les valeurs qui doivent être surveillées pour les changements. La fonction de rappel sera exécutée lorsque l'une des valeurs de ce tableau changera.

exemple : 

import { useEffect } from 'react'; const User = ({ userName }) => {

  useEffect(() => {

    document.title = `Hello ${userName}`;

  }, [userName]);

  return <h1>{userName}</h1>;

}

Dans cet exemple, le hook useEffect sera appelé après le rendu du composant et chaque fois que la dépendance la valeur de userName changera.

Les dépendences dans useEffect :

L'utilisation des dépendances dans useEffect est essentielle pour contrôler l'exécution de cette fonctionnalité. Les dépendances sont spécifiées en tant que deuxième argument du hook useEffect.

useEffect(() => {}, [dépendances]);

Lorsque vous utilisez un tableau de dépendances vide [], cela garantit que l'effet ne s'exécute qu'une seule fois, simulant ainsi le comportement de componentDidMount. En spécifiant correctement les dépendances, vous permettez à l'effet de se mettre à jour uniquement lorsque des valeurs spécifiques changent, semblable au comportement de componentDidUpdate.

Si vous omettez complètement le tableau de dépendances, l'effet sera exécuté à chaque rendu du composant, ce qui peut entraîner des problèmes de performances.

Références : 

1. « React useEffect », React, https://react.dev/reference/react/useEffect (consulté le 18 mars 2024)
2. « React useEffect Hooks », W3Schools, https://www.w3schools.com/react/react_useeffect.asp (consulté le 18 mars 2024)