Los componentes funcionales son mucho más eficientes que los componentes basados en clases. Se necesita escribir menos código para lograr el mismo objetivo. Esta publicación explica cómo los componentes funcionales pueden llevar a cabo eventos del ciclo de vida sin necesidad de convertirse en un componente basado en clases. Resulta que todo se puede administrar a través . de useEffect he utilizado en el pasado para gestionar las llamadas a la API, así como para implementar , pero nunca . ¡Resulta que ambos son muy similares! useEffect componentWillMount componentWillUnmount Cómo administrar el componenteWillMount con useEffect Para entender cómo podemos usar con componentes funcionales, primero tenemos que ver cómo el componente gestiona el montaje con useEffect. componentWillUnmount React, { useEffect } ; ComponentExample => { useEffect( { }, []); } import from 'react' const => () => () // Anything in here is fired on component mount. Si pasamos una matriz vacía como segundo argumento, le dice a la función useEffect que se active en el procesamiento del componente (componentWillMount). Esta es la única vez que disparará. Con esto en mente, ¿cómo podemos modificar el código para que funcione con componentWillUnmount? Resulta que la solución es muy simple. Cómo administrar el componenteWillUnmount con useEffect Si agrega una función de retorno dentro de la función useEffect, se activa cuando un componente se desmonta del DOM. Esto parece: React, { useEffect } ; ComponentExample => { useEffect( { { } }, []) } import from 'react' const => () => () return => () // Anything in here is fired on component unmount. Combinando ambas soluciones Esto significa que puedes usar , y en la misma llamada a la función useEffect. Reducción drástica de la cantidad de código necesario para administrar ambos eventos del ciclo de vida. Esto significa que puede usar fácilmente y dentro de los componentes funcionales. Al igual que: componentDidMount componentWillUnmount componentDidMount componentWillUnmount React, { useEffect } ; ComponentExample => { useEffect( { { } }, []) } import from 'react' const => () => () // Anything in here is fired on component mount. return => () // Anything in here is fired on component unmount. ¿Interesado en aprender más? Escribo regularmente sobre cómo trabajar con React, así como sobre otros consejos y trucos para desarrolladores. Si tiene alguna pregunta, envíeme un mensaje en Twitter y le responderé tan pronto como pueda. Sería genial saber de usted. @robertmars Publicado anteriormente en https://thoughtsandstuff.com/componentwillunmount-funcional-components-react
