Hello everyone, today we will see how can we use componentWillUnmount with react hooks. So as you all know that with React Hooks we don’t have lifecycle methods that are present in React Class Component, on the other hand, we have pre-built hooks provided by React some of them are useState, useEffect, useRef, useContext etc. Today we will now look into how can we use useEffect to work as componentWillUnmount
.
Why use componentWillUnmount?
First we will discuss why we need componentWillUnmount
lifecycle method in react app development. As per official documentation of ReactJS “componentWillUnmount()
is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount()
.” Read Official Documentation for Lifecycle Methods
So basically we do all the cleanup tasks inside and canceling of all the subscriptions when a component is mounted or updated. Let’s take an example you have added an event listener in your component for any task and that should be removed before the component is destroyed. In this case we can add event remove handler in componentWillUnmount lifecycle method and get our work done.
How to use componentWillUnmount with react hooks?
For this task, we will useEffect hook provided by React JS and call our subscription for event or API inside useEffect and do the cleanup of that particular task inside useEffect hook itself.
Let’s take an example of we are using an event for handling click outside for our popover element and we have to add an event on component initialization and also have to remove it before the component is destroyed. Below we can see how we have added our event at the time of component initialization.
useEffect(() => { document.addEventListener('click', handleClick) })
But here we have one problem, which is the event we added at the component initialization it will be called again and again the time component gets updated. So for this we will add dependencies to useEffect, but here in our case we have to just add this event handler at the time of component initialization and not to be called when the component is updated. So we will pass a blank array of dependencies to useEffect hook to make sure It runs only once at the time of component initialization. Let’s look below code for addition of dependency
useEffect(() => { document.addEventListener('click', handleClick) }, [])
Now we are sure that our event will be added only once at the time of component initialization. This is compliance with the react hooks concept. Now we have to do the cleanup at the time our component is getting destroyed.
For this, you might think we will require another function as react class component has componentDidMount and componentWillUnmount, but as per react hooks rule here we have another approach to do the cleanup. We do the initialization and cleanup in the same effect with react hooks. We do it like below.
useEffect(() => { document.addEventListener('click', handleClick); return function cleanup () { document.removeEventListener('click', handleClick); } }, [])
Here we return a cleanup function with the removing logic of our event. As per react hooks rule whenever an effect received a return function it runs only at the time of cleanup of the component. Also you know that effect runs everytime component renders if you pass a dependency to useEffect in that case the cleanup will run and react will cleans up the function before rendering it next time.
As per official documentation “Why did we return a function from our effect? This is the optional cleanup mechanism for effects. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. They’re part of the same effect!”
I hope you like the post. Please visit my other post which deals with creating a reusable component with React JS for your current application.
Learn something new today! Thanks ?
I’m glad I was able to help you learn something. ?
This helped me a lot! Thanks!
I’m glad to hear this. ?
Hello ? Your blog looks good. have a nice day. the blog was absolutely fantastic!
I’m so glad you liked my blog. Thank you for encouraging me. ?
Enjoyed reading the content above, really explains everything in detai,,the guide is
extremely interesting and effective.
King regards,
Mead Henneberg
It is really motivating that you liked the details I have put into this content. Thank you ?
Great post. Articles which have meaningful and insightful comments are
more enjoyable, at least to me. It is interesting to read what others thought and how it relates to them or their
customers, as their perspective could possibly help you
in the future.
Best regards,
Dinesen Valenzuela
Thanks and I too think the same. Posts which have comments from others will always give you an insight of how good the post is.
Hi there, this weekend is pleasant in favor of me, for the reason that this moment i am reading this impressive informative post here at my residence.
Because the admin of this site is working, no doubt
very soon it will be well-known, due to its feature contents.
Hi there to all, as I am genuinely eager of reading this website’s post to be updated regularly.
It includes good information.
Thanks a lot. I’m glad you liked this content. ?
I was recommended this website by my cousin. I am not sure whether this post is written by him as nobody else know such
detailed about my difficulty. You are amazing!
Thanks!
? Thank you.
Thanks very interesting blog!
Good blog post. You now have a follower. Cheers, Mate!
Howdy! I’m at work browsing your blog from my new apple iphone!
Just wanted to say I love reading your blog and look forward to
all your posts! Keep up the outstanding work!
nice work, Keep going ?