Why useEffect Causes Memory Leaks in React and How Cleanup Functions Fix It

React's useEffect hook frequently causes memory leaks when asynchronous operations such as API calls, event listeners, or timers continue running after a component has unmounted. The root cause lies in JavaScript closures: callbacks inside effects capture references to state setters from a specific render cycle, preventing the browser's garbage collector from freeing that memory. A common real-world trigger is a user navigating away mid-request, leaving a pending network promise that still holds the component's state and execution scope in memory. React provides a built-in solution by allowing developers to return a cleanup function from useEffect, which tears down side effects before the component unmounts or before the effect re-runs. Neglecting this cleanup mechanism allows leaks to accumulate silently, leading to increased memory consumption, UI lag, and hard-to-trace bugs in large-scale front-end applications.