What is the useEffect cleanup function?

Difficulty: 5/10

resource cleanup, subscription management, memory leaks

1
Some side effects need cleanup for example Component A requests the API to get some data, but while making that asynchronous request, Component A is removed from the DOM (it’s unmounted). There is no need to complete that asynchronous request. We can clean up (cancel) the asynchronous request so that it’s not completed.
2
the cleanup function helps developers clean effects that prevent unwanted behaviours and optimize application performance.
3
It is a function of the useEffect hook that allows us to stop side effects that no longer need to be executed before our component is unmounted.
4
useEffect is built in such a way that we can return a function inside it and this return function is where the cleanup happens.

cleanup function does not only run when our component wants to unmount, it also runs right before the execution of the next scheduled effect. cleanup function also runs after each re-render.

Scenario Questions

0-2 years experience

2-5 years experience

Follow-up Questions