DEV Community

React useEffect cleanup: How and when to use it

Martín Mato on May 14, 2020

Did you ever got the following error? Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memor...

Read full post

radoncreep • Feb 27 '21

I am just coming from the react docs trying to figure this out I couldn't get their explanation but this!!! Well explained, came across the same error now i understand why and Ik how to fix it. Thank you!

Martín Mato • Mar 17 '21

Happy to help!

Kaveh Karami • Apr 5 '21 • Edited

Thanks for the solution on Axios request.
I have a question.
I'm using an instance of Axios and in this instance, you cant be able to use instanceAxios.CancelToken.source() so I gotta import Axios too.
is there another way to use CancelToken.source() in the instance of Axios like instanceAxios.CancelToken.source()?

Martín Mato • Apr 5 '21

As far as I know axios by design, cancelToken won't be part of the instance. You may be able to do something similar to this.

const axios = require('axios');
const source = axios.CancelToken.source();
const instance = axios.create();
instance.get('/foo', { cancelToken: source.token });

oscar.lofwenhamn • Jul 21 '20

Thanks a bunch, that cleared things up! Time to add some let mounted=... to my effects..

Samuel Liedtke • Jul 20 '21

Many thanks, this was really helpful! I got this error "Warning: An update to SomeComponent inside a test was not wrapped in act(...)." when running my tests. Took me a while to figure out this was coming from a fetch() call in a useEffect() method that was updating some state. Applied the "only update state when mounted" fix you suggested and that solved it.

Rohit Prasad • May 14 '20

Thanks for the solution on axios request.
I had thought of looking into the warning before, but kept procrastinating it. Now I just need to go and apply the fix :)

Martín Mato • May 15 '20

Glad it was helpful for you

irfan • Oct 15 '21

hii here i'm not performing any async operation event though i'm still getting warnings with cleanup function when i'm routing to another page. Please can you suggest me any solution.

export default function useOnScreen(ref, rootMargin = "0px") {
const [isVisible, setIsVisible] = useState(false)
useEffect(() => {
let setRef=null;
if (ref.current === null) return
const observer = new IntersectionObserver(
([entry]) => setIsVisible(entry.isIntersecting),
{ rootMargin }
)
observer.observe(ref.current)
setRef=ref
return () => {
if (setRef.current) {
observer.unobserve(setRef.current)
}
}
}, [ref, rootMargin])

return isVisible
}

KAIDI • May 15 '20

Nice explanation, thnks

ozankurucu • May 13 '21

Thank you this was unbelievable!

mkumar100 • Apr 16 '21

Excellent

Pravin Poudel • Apr 9 '21

there migh be fetchUsers() instead of fetchData() in axios abort code.

Thank you for the great content !!

Sami Kalammallah • Apr 3 '21

Thank you, it solves my clean up definition issue :)

Neshat • Mar 6 '21

Very nice simple and clear explanation. Was trying to figure it out in the react docs but this made my day. ✌️

Martín Mato • Mar 17 '21

Happy to help!

Praveen Danagoudru • Dec 9 '20

let mounted....... is awesome :)

Austin Ofor • Mar 16 '21

Thanks, this helped me.

Deividson Damasio • Sep 18 '20

Thank you very much! 😀👍

bronxsystem • Sep 10 '20

the axios thing helped me out a lot thats really cool thank you.

Paras 🧙‍♂️ • Sep 5 '20

awesome !!...very well explained

Andres Avellan • Mar 3 '22

Thanks, nice article.

What about putting setloading(true) in the return function?
ex.
return function cleanup() {
setloading(true);
}
Would it differ from mounted = false? and why?
Thank you in advance.

Manish Kumar Sahu • Jul 23 '21

Thanks Man! This is quite helpful.

Oleksii Ivanov • May 20 '20

Thanks for details.

Sudarshan K J • May 30 '21

Thanks! It is very well written. Even novices like me could understand it fully.

Sudarshan K J • May 30 '21

In the last axios example, shouldn't the method call be fetchUsers() and not fetchData()?

radoncreep • Jun 14 '21

yes. it should be fetchUsers()

prodanov17 • Jul 18 '23 • Edited

I use useEffect to call a function which calls the api via axios only on the initial render. I don’t get any errors, do I still need to unsubscribe and do all this?