Découverte
Notions avancées
Les hooks
Notions avancées
TP
TP Recettes: AuthentificationRéservé aux membres premiums
30 min
TP Recettes: Récupération des ingrédientsRéservé aux membres premiums
38 min
TP Recettes: Gestion des ingrédientsRéservé aux membres premiums
29 min
TP Recettes: Gestion des recettesRéservé aux membres premiums
39 min
TP Recettes: Création d'une recetteRéservé aux membres premiums
47 min
TP Recettes: Edition d'une recetteRéservé aux membres premiums
25 min
Conclusion
Conclusion
04 min

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.