5

I want to know when is the useEffect hook clean up function get called in react, Does it get called on dependency change or it get called when component is unmounted.

For example in my component if i have useEffect

useEffect(()=>{

  return ()=>{ 
             //clean up function code

             }  //clean up function

},[dependency])

will the clean up function get's called on dependency change or it will get called when the component gets unmounted.

user8989
  • 580
  • 2
  • 6
  • 21

2 Answers2

4

It will clean up on both case (unmount and on change of dependency) as you have passed dependency :

When exactly does React clean up an effect? Ref

React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time.

Vivek Doshi
  • 56,649
  • 12
  • 110
  • 122
  • I want to know does component unmount on every time state changes, means does component re-rerender on every state change cause component to unmount and mount again, does component unmount on every render – user8989 Jun 11 '20 at 05:47
  • 1
    no, `unmout` is different thing and `re-render` is diff thing, `umount` triggers when component will be removed, and `re-render` is caused by the changes in `props` and `state`to just update the dom – Vivek Doshi Jun 11 '20 at 05:51
  • @user8989, sorry no idea – Vivek Doshi Jun 11 '20 at 06:11
0

Just adding on @Vivek Doshi answer. useEffect is synonym to componentDidMount, componentDidUpdate, and componentWillUnmount combined. The effect is run on first render, all subsequent re-renders (unless conditions provided).

Cleanup is run when component unmounts.

To avoid unexpected bugs, react will clear the effect before running new effect. You can play around and grasp the concept with this sandbox

artfulbeest
  • 1,395
  • 2
  • 16
  • 22