When is the cleanup function triggered when using useEffect hook with dependencies?
The explanation provided by @Powell Ye is good however there a bit of erroneous information specifically when speaking about re-renders (e.g. when props change)
consider some simple component with the following
useEffect( () => {
console.log('Effect is applied')
//some logic
return () => {
console.log('cleaning up')
//cleanup logic
}
})
return (<>
{console.log('rendering...')}
</>)
say the props passed in changes you might think it goes as such
- 'cleaning up'
- new props
- 'rendering...'
- 'Effect is applied'
However, the following actually occurs
- new props
- 'rendering...'
- 'cleaning up'
- 'Effect is applied'
That is, the clean up function runs AFTER the new render/painting but BEFORE the 'new' effects are applied, the docs can be a bit ambigious about this
the previous effect is cleaned up before executing the next effect
This is done for performance reasons => so that rendering is not delayed ( it can be frustrating at times for me too )