Comment pouvons-nous implémenter componentWillUnmount en utilisant des hooks de réaction?

componentWillUnmount peut être simulé en renvoyant une fonction à l'intérieur du hook useEffect . La fonction retournée sera appelée juste avant chaque nouveau rendu du composant. Strictement parlant, c'est la même chose mais vous devriez être capable de simuler n'importe quel comportement que vous voulez en utilisant cela.

useEffect(() => {
  const unsubscribe = api.createSubscription()
  return () => unsubscribe()
}, [])

Mise à jour

Ce qui précède s'exécutera à chaque fois qu'il y aura un rerender. Cependant, pour simuler le comportement uniquement lors du montage et du démontage (c.-à-d. ComponentDidMount et componentWillUnmount). useEffect prend un deuxième argument qui doit être un tableau vide.

useEffect(() => {
  const unsubscribe = api.createSubscription()
  return () => unsubscribe()
})

Voir une explication plus détaillée de la même questionici .

Peu importe que la fonction retournée par useEffect soit appelée avant ou après le useEffect du composant: vous avez toujours accès aux états valables à travers la fermeture:

  const [input, setInput] = useState(() => Store.retrieveInput());

  useEffect(() => {
    return () => Store.storeInput(input); // < you can access "input" here, even if the component unmounted already
  }, []);

Si vous ne gérez pas l'entrée dans l'état des composants, toute votre structure est cassée et doit être modifiée pour gérer l'état au bon endroit. Dans votre cas, vous devez soulever l'état d'entrée partagé des composants vers le parent.

Les documents ReactJS sur les hooks spécifient ceci:

Les effets peuvent également éventuellement spécifier comment «nettoyer» après eux en renvoyant une fonction.

Ainsi, toute fonction que vous retournez dans votre hook useEffect sera exécutée lorsque le composant sera démonté, ainsi qu'avant de réexécuter l'effet en raison d'un rendu ultérieur.

La question ici est de savoir comment exécuter du code avec des hooks AVANT le démontage? La fonction de retour avec hooks s'exécute APRÈS le démontage et bien que cela ne fasse pas de différence dans la plupart des cas d'utilisation, il y en a là où c'est une différence critique.

Après avoir fait quelques recherches à ce sujet, je suis arrivé à la conclusion qu'actuellement, les hooks ne fournissent tout simplement pas d'alternative directe à componentWillUnmount . Donc, si vous avez un cas d'utilisation qui en a besoin, ce qui est principalement pour moi du moins, l'intégration de bibliothèques non React, il vous suffit de le faire à l'ancienne et d'utiliser un composant.

Espérons que cela changera à l'avenir

Après quelques recherches, j'ai constaté que - vous pouviez toujours accomplir cela. Peu compliqué mais devrait fonctionner.

Vous pouvez utiliser useRef et stocker les accessoires à utiliser dans une fermeture telle que la méthode de rappel return useEffect

React.useEffect(() => {
  return () => {
    console.log(props.current);
  };
}, [props.current]);

DEMO

Cependant, une meilleure façon est de passer le deuxième argument à useEffect afin que le nettoyage et l'initialisation se produisent lors de tout changement des accessoires souhaités

function Home(props) {
  const val = React.useRef();
  React.useEffect(
    () => {
      val.current = props;
    },
    [props]
  );
  React.useEffect(() => {
    return () => {
      console.log(props, val.current);
    };
  }, []);
  return <div>Home</div>;
}

Depuis l'introduction du hook useLayoutEffect , vous pouvez maintenant faire

useLayoutEffect(() => () => {
  // Your code here.
}, [])

pour simuler componentWillUnmount . Cela s'exécute pendant le démontage, mais avant que l'élément ait réellement quitté la page.