Comment by Favourite Jome on "A Look At React Hooks: useEffect"

Hello Victoria Lo, I have a question.

I don't really understand why I should use a cleanup function in useEffect hook, so far all the little projects I've done using React I don't return the cleanup function.

If it's not too much to ask, could you give instances where I really need to return a cleanup function and what are the side effects of not returning a cleanup function?

Stealing the spotlight 😁. Basically if u set something with useEffect u need to remove it when u don't need it. I had this problem on my 2048 game where I added an event listener inside of a useEffect and didn't clean up. useEffect(()=> { document.addEventListener("click", handleClick) }, []) On re-render by a useState change for example, useEffect runs again so the same event listener gets added again and again. So my function got called too many times. To prevent this I added removeEventListener like this: useEffect(()=> { document.addEventListener("click", handleClick) return ()=> document.removeEventListener("click", handleClick) }, []) Return gets called every time before the component re-renders and runs removeEventListener 👌

Great example JC Lee! Thanks for answering on my behalf :)

Thanks for the feedback JC Lee I think I get it know.

But if it's a fetch call, there nothing to clean up right?

Jome Favourite No clean up but u'd want to add a logic to check whether u already fetched to prevent re-fetch. Like if(data) return

Okay, that'll be when I want to use the data. Thanks JC Lee

Search Hashnode