How to Clean Up Side Effects in React useEffect

How to Clean Up Side Effects in React useEffect

The cleanup function is the most forgotten part of useEffect, and forgetting it causes memory leaks and stale updates. Here is why it matters and how to do it.

What Cleanup Is

useEffect can return a function. React calls that function before the next effect runs and when the component unmounts. That function is where you tear down whatever the effect set up.

Why It Matters

If you set up a subscription, timer, or listener and never remove it, it keeps running after the component is gone, leaking memory and trying to update state on an unmounted component.

For Subscriptions

Subscribe in the effect, and return a function that unsubscribes. This guarantees the subscription is removed when the component unmounts or when dependencies change.

For Timers

Set up a timer in the effect, and return a function that clears it. Otherwise the timer keeps firing after unmount.

For Event Listeners

Add a listener in the effect, and return a function that removes it. Forgetting this is a classic source of memory leaks in React apps.

For Fetches

For data fetching, use an AbortController. Pass its signal to fetch, and abort it in the cleanup. This cancels the in-flight request instead of just ignoring its result.

The Pattern

Every time you set something up in an effect, ask what tears it down. If the answer is nothing, you have a leak. Return a cleanup function for every setup.

The Takeaway

Cleanup is not optional for effects that set up subscriptions, timers, listeners, or fetches. Return a cleanup function for every setup, and you prevent the leaks and stale updates that plague React apps.