javascript / intermediate
Snippet
Event-Listener in useEffect bereinigen
Die Rückgabe einer Funktion aus useEffect dient als Bereinigungsmechanismus, der Memory Leaks verhindert, indem Listener beim Unmounten der Komponente entfernt werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
useEffect(() => {const handleResize = () => console.log(window.innerWidth);window.addEventListener('resize', handleResize);return () => {window.removeEventListener('resize', handleResize);};}, []);
react
Erklärung
1
window.addEventListener('resize', ...)
Registriert einen globalen Event-Listener beim Mounten der Komponente.
2
return () => { ... }
Die Bereinigungsfunktion, die React aufruft, bevor die Komponente zerstört wird.
3
window.removeEventListener(...)
Trennt den Listener sicher, um Systemressourcen freizugeben.