Simple example: on one route u have 1 component with hook specified above. U change route. Then go back. What will happen on specified keydown? Assume SPA with react router. This is simple example. There are tons more complicated ones. It's even that case when we have no deps and adding event on mount, useEffect is MUCH more flexible.
What is the purpose of removing the listener in the return statement?
Simple example: on one route u have 1 component with hook specified above. U change route. Then go back. What will happen on specified keydown? Assume SPA with react router. This is simple example. There are tons more complicated ones. It's even that case when we have no deps and adding event on mount, useEffect is MUCH more flexible.
Sung and e1cb4's answer has explained all my opinion 👏
these are purpose:
the function at return statement is called when the component is unmounted, so event handler is keeped active during the component is being mounted.
As the event handler is bound to the
window, even after the component is unmounted, the handler is still active.As a general rule, cleaning up when unused would save memory and other possible issues.