Your React Native App Has a Memory Leak. Here's How to Find It in 15 Minutes.

Your app works perfectly for the first 10 minutes. Then it starts dropping frames. Then animations stutter. Then it crashes. The crash report says "out of memory" but your code does not load large datasets or process heavy media. You have a memory leak.

React Native memory leaks are insidious because they are invisible during development — you restart the app too frequently to notice — and catastrophic in production — where users keep the app open for hours.

The 15-Minute Diagnostic

Open your app in development mode. Navigate to the screen you suspect is leaking. Open the performance monitor (shake the device, select "Perf Monitor"). Note the JS heap size.

Navigate away from the screen. Navigate back. Note the JS heap size again. Repeat five times. If the heap size increases with each visit and never returns to baseline, the screen is leaking.

This takes 3 minutes and identifies the leaking screen with certainty. The remaining 12 minutes identify the cause.

The Five Most Common Causes

Uncleared timers. setInterval and setTimeout scheduled inside a component that are not cleared when the component unmounts. The timer fires after the component is gone, holding a reference to the component's closure and preventing garbage collection.

Fix: clear every timer in the useEffect cleanup function.

Event listener accumulation. Event listeners added with addEventListener or DeviceEventEmitter.addListener that are not removed on unmount. Each visit to the screen adds another listener. After 10 visits, 10 listeners hold references to 10 closure scopes.

Fix: return the subscription's remove function from useEffect cleanup.

Animated value references. Animated.Value instances created inside components that are never stopped. The animation system holds references to these values even after the component unmounts.

Fix: call Animated.timing(...).stop() in cleanup, or use useRef to persist Animated values across renders without recreating them.

Async operations completing after unmount. A fetch request or database query that resolves after the user has navigated away, calling setState on an unmounted component. While React suppresses the state update, the closure holding the response data remains in memory.

Fix: use an AbortController for fetch requests and check a mounted ref before processing async results.

Image caching without bounds. React Native's Image component caches decoded image data in memory. Screens with many images that are visited repeatedly accumulate decoded image data without eviction.

Fix: use a library like react-native-fast-image that provides cache size limits, or implement manual cache eviction for image-heavy screens.

The Prevention Pattern

Every useEffect that creates a timer, listener, subscription, or async operation should return a cleanup function that cancels it. This is not a best practice — it is a memory leak prevention requirement. Enforce it through a custom ESLint rule that flags useEffect blocks without cleanup returns.

If your app's crash rate increases with session length, let's find and fix the leaks.