[NEW]: ensure-matching-remove-event-listener

[AndreaPontrandolfo]

Tentative to add a rule that enforce developers to cleanup eventListeners in the useEffect block.

[ljharb]

I'm a bit confused how why this needs a full lint rule - manually adding event listeners should be exceedingly rare, as the proper approach is generally to add them as jsx props. Obviously window is a special case, but generally one puts this inside a single component managed by domain experts, and everyone else just uses the component.

[AndreaPontrandolfo]

Hi, appreciate the review!
I wrote this rule (and actually included this in my own Eslint plugin) because this mistake is pretty frequent at my company. I usually happen to work with people of all different skill grades and not everyone knows about every single nuance of React.
Eslint isn't only useful to standardize our codebases, it can also prevent mistakes like this and even help juniors learn something with minimal effort, like in this case.
I think this rule has a pretty solid use-case and could be useful to many people but i'm very eager to listen to other people opinion on this, coming from different angles.

[ljharb]

That totally makes sense - but it seems like one way to solve that is to force usage of a sanctioned custom component and ban via eslint any usage of window.addEventListener or addEventListener outside of that component :-)

[AndreaPontrandolfo]

That totally makes sense - but it seems like one way to solve that is to force usage of a sanctioned custom component and ban via eslint any usage of window.addEventListener or addEventListener outside of that component :-)

That's also an idea, but would be a vastly more complex rule than this, i think. This one is relatively simple and straightforward, and doesn't require any particular setup on part of the developers.

[AndreaPontrandolfo]

Hi, @ljharb, i'm not really sure why the CI is failing. What should i do?

[ljharb]

The documentation checker seems to be erroring; there's a generation script to run.

[codecov]

Codecov Report

Merging #3442 (bd42395) into master (c6d082a) will increase coverage by 0.00%.
The diff coverage is 98.30%.

@@           Coverage Diff           @@
##           master    #3442   +/-   ##
=======================================
  Coverage   97.57%   97.58%           
=======================================
  Files         129      130    +1     
  Lines        9200     9259   +59     
  Branches     3336     3372   +36     
=======================================
+ Hits         8977     9035   +58     
- Misses        223      224    +1     

Impacted Files	Coverage Δ
configs/all.js	100.00% <ø> (ø)
lib/rules/ensure-matching-remove-event-listener.js	98.30% <98.30%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[ljharb]

what about element.addEventListener, added with a ref?

[AndreaPontrandolfo]

I'm not sure what you mean, can you expand?

[ljharb]

I mean that addEventListener isn't just on window, it's also on every DOM element, and the same reasoning you've used for "window" would apply to element-based listeners as well.