Le hook useEffect est un hook qui va permettre de déclencher une fonction de manière asynchrone lorsque l'état du composant change. Cela peut permettre d'appliquer des effets de bords ou peut permettre de reproduire la logique que l'on mettait auparavant dans les méthodes componentDidMount et componentWillUnmount.
function Compteur () {
const [count, increment] = useIncrement(0, 2)
useEffect(() => {
const timer = window.setInterval(() => {
increment()
}, 1000)
return function () {
clearInterval(timer)
}
}, [])
useEffect(() => {
document.title = "Compteur " + count
}, [count])
return <button onClick={increment}>Incrémenter {count}</button>
}useEffect prend en premier paramètre une fonction qui sera exécutée lorsqu'une de ses dépendance change (cette fonction est exécutée de manière asynchrone et ne bloquera pas le rendu du composant). Le second paramètre est un tableau qui permet de définir les dépendances de ce hook (cela permet de ne pas exécuter la fonction que si un élément a changé pour ce composant). Si vous ne mettez aucune dépendance (un tableau vide) dans ce cas là la fonction passée en premier paramètre ne sera exécuté que lors du montage du composant.
La fonction qui sert de premier paramètre peut renvoyer une fonction qui sera utilisée pour nettoyer les comportements qui auraient pu être mis en place à une étape précédente.
