React useEffect en profondeur / utilisation de useEffect?

J'essaie de comprendre le useEffectcrochet en profondeur.

Je voudrais savoir quand utiliser quelle méthode et pourquoi?

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

useEffect(callback)

Fonctionne sur chaque rendu de composant.

Généralement utilisé pour le débogage, analogue à l'exécution du corps de la fonction sur chaque rendu:

const Component = () => {
  callback()
  return <></>;
};

useEffect(callback,[])

S'exécute une fois sur un support de composant.

Généralement utilisé pour initialiser l'état des composants par extraction de données, etc.

Remarque : Le rappel exécuté après la phase de rendu (connu "Gotcha").

useEffect(callback,[arg])

Fonctionne en cas de changement de argvaleur.

"On Change" fait référence à une comparaison superficielle avec la valeur précédente de arg(compare la valeur de argdu rendu précédent et du rendu actuel prevArg === arg ? Do nothing : callback()).

Habituellement utilisé pour exécuter des événements sur les accessoires / le changement d'état.

Remarque: plusieurs dépendances peuvent être fournies: [arg1,arg2,arg3...]

• Un guide complet useEffectpar Dan Abramov
• useEffectAPI .
• Utilisation du crochet d'effet - React docs.

Si vous connaissez les méthodes de cycle de vie de la classe React, vous pouvez penser à useEffect Hook en tant que componentDidMount, componentDidUpdate et componentWillUnmount combinés.

1. useEffect sans second paramètre: Ceci est utilisé lorsque nous voulons que quelque chose se produise soit lorsque le composant vient d'être monté, soit s'il a été mis à jour. Conceptuellement, nous voulons que cela se produise après chaque rendu.

2. useEffect avec les deuxièmes paramètres comme []: Ceci est utilisé lorsque nous voulons que quelque chose se produise au moment du montage du composant, s'il ne s'exécute qu'une seule fois au moment du montage.Il est plus proche des composants familiersDidMount et componentWillUnmount.

3. useEffect avec quelques arguments passés dans le deuxième paramètre: Ceci est utilisé lorsque nous voulons que quelque chose se passe au moment où le pramter est passé par exemple. les arguments ont changé dans votre cas.

Pour plus d'informations. vérifiez ici: https://reactjs.org/docs/hooks-effect.html

3.useEffect avec quelques arguments passés dans le deuxième paramètre useEffect (() => {}, [arg])

il s'exécutera en premier, puis il s'exécutera à nouveau si le changement d'argument

Vous oubliez également de demander ce qu'il en est du retour à l'intérieur de useEffect ... Ses utilisations pour le nettoyage s'exécuteront lors du démontage du composant