An effect connects a component to something outside React. A subscription needs both a setup and an undo operation. When the component disappears, its handler must stop receiving events. When it returns, one handler should be active. A page can look correct during its first visit while still leaking listeners after repeated mounting.
You'll work with a local shipment event and an observable delivery count. Publish while subscribed, pause the subscriber, publish again, then resume. The paused event is the boundary that exposes a missing cleanup. Keep the same handler reference for adding and removing the listener. The preview uses local events only, so the test does not contact a server or depend on a real shipment feed.
window.deliveries=0;
function Subscriber(){useEffect(()=>{const handler=()=>{window.deliveries += 1};window.addEventListener('shipment',handler);return ()=>window.removeEventListener('shipment',handler)},[]);return <p>Subscribed</p>}
function App(){const [active,setActive]=useState(true),[total,setTotal]=useState(0);return <><h1>{f.organization}</h1>{active&&<Subscriber/>}<output aria-label="Deliveries">{total}</output><button onClick={()=>{window.dispatchEvent(new Event('shipment'));setTotal(window.deliveries)}}>Publish</button><button onClick={()=>setActive(a=>!a)}>{active?'Pause':'Resume'}</button></>}
Trace the state change and its visible boundary before building the transfer tasks.