Hé les gars, dans cette procédure pas à pas, je vais vous montrer tout ce que vous devez savoir pour utiliser la fonction useEffect de React comme un pro.

Une histoire brève

Avant useEffect , il existait des méthodes de cycle de vie, à savoir :

1. composantDidMount
2. composantDidUpdate
3. componentWillUnmount

componentDidUpdate(prevProps, prevState) {
  if (prevProps.foo !== this.props.foo) {/* do something */} 
  if (prevState.bar !== this.state.bar)  {/* do something else */}
}

Avec ces méthodes de cycle de vie, nous pouvons gérer de manière fiable tout changement d'état du composant, alors pourquoi changer pour useEffect ?

Entrez les composants sans état React

À un moment donné (je crois dès 2016), l'équipe React a pris la décision de créer des composants React qui peuvent être instanciés avec juste une fonction Javascript classique à l'ancienne. Donc:

import React from "react";
function MyFunc() {
  return <div>Hey!</div>
}

Entrez React.useEffect

La nouvelle approche pour gérer les changements d'état est venue sous la forme d'une fonction useEffect exposée par la bibliothèque React. Alors, comment recréer nos méthodes bien-aimées componentDidMount , componentDidUpdate et componentWillUnmount ? Développons notre fonction sans état précédente :

import React from "react";
function MyFunc(props) {
const [bar setBar] = React.useState(null);
  
  React.useEffect(() => {
    console.log("componentDidMount");
    return () => {
      console.log("componentDidUnmount")
    }
  }, []);
  
  React.useEffect(() => {
    console.log("componentDidUpdate when 'bar' changes");
  }, [bar]);
React.useEffect(() => {
    console.log("componentDidUpdate when 'props.foo' changes");
  }, [props.foo]);
return <div>Hey!</div>
}

Une autre chose que nous avons ajoutée à cet exemple, React.useState, un hook d'état, est hors de portée de ce tutoriel, mais apprenez-en plus à ce sujet ici !

Aller au-delà de la gestion du cycle de vie

C'est formidable de pouvoir gérer l'état d'un composant ainsi qu'avec les méthodes de cycle de vie précédentes. Entre la simplicité et la réutilisabilité des fonctions stateless, et la fonction React.useEffect, un nouveau paradigme s'offre à nous : les fonctions stateful réutilisables, ou plus communément nommées : custom hooks .

Un lecteur averti comme vous a probablement remarqué qu'avec useEffect, nous ne pouvons pas accéder à la propriété prevProps ou prevState comme nous le pouvions auparavant. N'ayez pas peur ! Lisez la solution pour cela ici . La raison pour laquelle cette solution fonctionne est que React.useRef ne déclenche pas de nouveaux rendus du composant. De plus, useEffect sans dépendances se déclenche à chaque fois qu'il y a un nouveau rendu du composant, quel que soit le changement d'état qui l'a déclenché.

Bonjour crochets personnalisés

Il n'y a vraiment pas de meilleur exemple de base pour un hook personnalisé que celui que React partage dans sa documentation officielle ici . Commençons par le bas de l'exemple et montons :

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

import React, { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

Conclusion

Dans ce tutoriel, nous avons examiné :

1. Comment nous avons géré le cycle de vie d'un composant avant useEffect et pourquoi cette approche est devenue obsolète
2. Comment utiliser useEffect pour gérer efficacement le cycle de vie d'un composant
3. Comment nous pouvons tirer parti de la réutilisabilité des fonctions sans état de React et utiliserEffect pour créer des fonctions avec état réutilisables.