React : comment déclencher une fonction via useEffect une seule fois, après le premier rendu ?
La fonction "useEffect()" est un des Hooks proposés depuis la version 16.8 du framework ReactJS. Il remplace dans un composant fonctionnel les évènements "componentDidMount", "componentWillMount" et "componentUpdate" que l'on utilise avec un composant de classe. Il est donc possible de déclencher une fonction une seule fois, lors de la première fois que le composant est affiché. Cela dépend du paramétrage de la fonction.
La fonction "useEffect()" est normalement exécutée après chaque rendu d'un composant. Elle accepte deux paramètres. Le premier est la fonction qui va être lancée. Le deuxième paramètre est particulier et c'est ce paramètre qu'il faut adapter pour déterminer le moment où la première fonction est appelée. Il s'agit d'un tableau. Ce tableau peut contenir des éléments à l'intérieur. Si vous ajoutez des éléments, la fonction "useEffect()" sera appelée lors du premier affichage de votre composant et à chaque fois qu'un des éléments du tableau sera modifié. Vous l'avez donc déjà peut-être compris, si vous utilisez un tableau vide, la fonction "useEffect()" est appelée uniquement lors de l'affichage du premier composant.
//Ici, elle sera exécutée à chaque affichage
useEffect(() => {
monTraitement();
});
//Elle sera appelée lors du premier affichage et à chaque fois que l'élément "maVariable" sera modifié
useEffect(() => {
monTraitement();
}, [maVariable]);
//Dans ce cas, la fonction ne sera appelée que lors du premier affichage du composant
useEffect(() => {
monTraitement();
}, []);