Comment utiliser le hook useEffect React

Découvrez à quoi sert le hook useEffect React et comment l'utiliser!

Découvrez monPrésentation des crochets Reactd'abord, si vous êtes nouveau pour eux.

Un hook React que j'utilise parfois estuseEffect.

import React, { useEffect } from 'react'

Une caractéristique très importante des Hooks est de permettre aux composants de fonction d'accéder aux hooks du cycle de vie.

En utilisant des composants de classe, vous pouvez enregistrer une fonction sur lecomponentDidMount,componentWillUnmountetcomponentDidUpdateévénements, et ceux-ci serviront de nombreux cas d'utilisation, de l'initialisation des variables aux appels d'API en passant par le nettoyage.

Les crochets fournissent leuseEffect()API. L'appel accepte une fonction comme argument.

La fonction s'exécute lorsque le composant est rendu pour la première fois et à chaque nouveau rendu / mise à jour ultérieure. React met d'abord à jour le DOM, puis appelle toute fonction passée àuseEffect(). Le tout sans bloquer le rendu de l'interface utilisateur même sur le code de blocage, contrairement à l'anciencomponentDidMountetcomponentDidUpdate, ce qui rend nos applications plus rapides.

Exemple:

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => { const [count, setCount] = useState(0) const [name, setName] = useState(‘Flavio’)

useEffect(() => { console.log(Hi </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> you clicked </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> times) })

return ( <div> <p> Hi {name} you clicked {count} times </p> <button onClick={() => setCount(count + 1)}>Click me</button> <button onClick={() => setName(name === ‘Flavio’ ? ‘Roger’ : ‘Flavio’)}> Change name </button> </div> ) }

ReactDOM.render( <CounterWithNameAndSideEffect />, document.getElementById(‘app’) )

Le mêmecomponentWillUnmountle travail peut être réalisé en optionretourune fonction de notreuseEffect()paramètre:

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
  return () => {
    console.log(`Unmounted`)
  }
})

useEffect()peut être appelé plusieurs fois, ce qui est bien pour séparer la logique non liée (quelque chose qui affecte les événements du cycle de vie des composants de classe).

Depuis leuseEffect()les fonctions sont exécutées à chaque re-rendu / mise à jour ultérieure, nous pouvons dire à React d'ignorer une exécution, à des fins de performances, en ajoutant un deuxième paramètre qui est un tableau contenant une liste de variables d'état à surveiller. React ne réexécutera l'effet secondaire que si l'un des éléments de ce tableau change.

useEffect(
  () => {
    console.log(`Hi ${name} you clicked ${count} times`)
  },
  [name, count]
)

De même, vous pouvez dire à React de n'exécuter l'effet secondaire qu'une seule fois (au moment du montage), en passant un tableau vide:

useEffect(() => {
  console.log(`Component mounted`)
}, [])

useEffect()est idéal pour ajouter des journaux, accéder à des API tierces et bien plus encore.

Exemple sur Codepen:

Voir le styloExemple de React Hooks # 3 Effets secondairespar Flavio Copes (@flaviocopes) surCodePen.

Tech Wiki Online!