Rules Hub
Coding Rules Library
Prefer AbortController for event cleanup
Use AbortController signals to manage and clean up event listeners instead of manually pairing addEventListener with removeEventListener.
Bad example
| 1 | useEffect(() => { |
| 2 | const handleResize = () => console.log('Resizing'); |
| 3 | |
| 4 | window.addEventListener('resize', handleResize); |
| 5 |
|
| 6 | return () => { |
| 7 | // Requires keeping the exact function reference |
| 8 | window.removeEventListener('resize', handleResize); |
| 9 | }; |
| 10 | }, []); |
Explanation (EN)
Manually removing event listeners requires ensuring the function reference passed to removeEventListener is identical to the one added. This is verbose and error-prone, especially with complex closures.
Objašnjenje (HR)
Ručno uklanjanje slušatelja događaja zahtijeva osiguravanje da je referenca funkcije identična onoj koja je dodana. To je opširno i podložno greškama, posebno kod složenih 'closure' funkcija.
Good example
| 1 | useEffect(() => { |
| 2 | const controller = new AbortController(); |
| 3 | const handleResize = () => console.log('Resizing'); |
| 4 |
|
| 5 | window.addEventListener('resize', handleResize, { |
| 6 | signal: controller.signal |
| 7 | }); |
| 8 |
|
| 9 | return () => { |
| 10 | // Cleanly removes all listeners attached to this signal |
| 11 | controller.abort(); |
| 12 | }; |
| 13 | }, []); |
Explanation (EN)
Using AbortController decouples the cleanup logic from specific function references. Calling abort() automatically removes the event listener, reducing boilerplate and making the cleanup phase safer and more predictable.
Objašnjenje (HR)
Korištenje AbortController-a odvaja logiku čišćenja od specifičnih referenci funkcija. Pozivanje abort() automatski uklanja slušatelja, smanjujući boilerplate kod i čineći fazu čišćenja sigurnijom i predvidljivijom.
Notes (EN)
This pattern is standard in modern browsers and also works for cleaning up fetch requests in the same effect.
Bilješke (HR)
Ovaj obrazac je standardan u modernim preglednicima i također funkcionira za otkazivanje fetch zahtjeva unutar istog efekta.