Most up to date version of this article: https://robertmarshall.dev/blog/componentwillunmount-functional-components-react
Functional components are far more efficient than class based components. There is also less code that is needed to be written to achieve the same goal.
However, I could not get my head around how functional components could implement the use of life-cycle events without needing to be changed to a class.
Turns out everything can be managed through useEffect.
I have used useEffect in the past to manage API calls, and what happened on a componentWillMount, but never componentWillUnmount. It turns out both are very similar!
How to manage componentWillMount with useEffect
To understand how we can use componentWillUnmount, first we need to look at how the component manages mounting with useEffect.
import React, { useEffect } from 'react';
const ComponentExample => () => {
useEffect( () => {
// Anything in here is fired on component mount.
}, []);
}
If we pass an empty array as the second argument, it tells useEffect to fire on component load. This is the only time it will fire.
With this in mind, how can we alter the code to work with componentWillUnmount? Turns out the solution is very simple.
How to manage componentWillUnmount with useEffect
If you add a return function inside the useEffect function, it is triggered when a component unmounts from the DOM. This looks like:
import React, { useEffect } from 'react';
const ComponentExample => () => {
useEffect(() => {
return () => {
// Anything in here is fired on component unmount.
}
}, [])
}
Combining both solutions
This means that you can use componentDidMount, and componentWillUnmount in the same useEffect function call. Dramatically reducing the amount of code needed to manage both life-cycle events. Like so:
import React, { useEffect } from 'react';
const ComponentExample => () => {
useEffect(() => {
// Anything in here is fired on component mount.
return () => {
// Anything in here is fired on component unmount.
}
}, [])
}
Top comments (19)
I want to display an dialog box on unmount and When user cancels it should stop unmounting the component.
Right now, even if user cancels or says ok, component will anyway unmount on return funtion.
Is there any way to stop unmount on the return function? Or any other approach?
Hi, I need a help
How to convert this in functional component ?
I have done something like this ...
I am facing problem in
return function
If you don't need anything to fire on component unmount, you can remove the return.
Thank you very much for this
the returned function fires on component Re-render also. How to you check if its an unmount or just a re-render ?
Basically its just a clean up function which runs every time the useEffect is used (except the first time)
Are you sure? AFAIK it should not be the case, it's only triggered once the component is unmounting or remounting itself. So maybe you can check that out.
Also you might have other useEffect who are defined sooner and as you might know the order of defining useEffect hooks matter
I suppose you could use a useRef to track the render (it will not be cleaned on a rerender). Depends on what you need it to do.
import React, { useEffect } from 'react';
const ComponentExample => () => {
useEffect( () => {
// Anything in here is fired on component mount.
}, []);
}
hi srry this show me that is fired on component mount but not on will mount, so i try to find what is best solution to replace componentWillMount. Tnx.
Thanks very much
This is going to simulate componentDidUnmount, not componentWillUnmount
Hm, interesting. Can you explain it further in detail?
Nice this is what I was searching for :).
"Parsing error: Unexpected token, expected ","" is what i get when i try to return that
Looks like you have a typo?
Very cool!