How do you debug a memory leak with Hermes heap snapshots?

WHAT THIS TESTS: A disciplined, comparative approach to memory leaks using the Hermes heap profiler exposed through React Native DevTools, and knowing which patterns actually indicate a leak.

A GOOD ANSWER COVERS: Establish a baseline by capturing an initial heap snapshot after the app reaches a steady state. Then exercise the suspect flow several times, for example navigating into a screen and back repeatedly, so any leaked allocations accumulate. Trigger garbage collection so non-leaked garbage is reclaimed, then capture a second snapshot. Compare the snapshots focusing on retained size and object counts: a leak shows objects of the same constructor whose count and retained size rise with every cycle and never drop after GC. Follow the retainer chain to see what keeps each object alive.

COMMON WRONG ANSWERS: Drawing conclusions from a single snapshot, which cannot distinguish normal usage from a leak. Treating a one-time allocation spike as a leak without confirming it persists after GC across cycles. Looking only at shallow size and ignoring retained size and retainer paths. Assuming the JS engine alone causes all leaks, ignoring native module retainers.

LIKELY FOLLOW-UPS: Common RN leak sources such as unremoved event listeners, dangling timers, subscriptions not cleaned in useEffect, and captured props in closures; how the dependency array affects retention; and distinguishing JS heap leaks from native memory growth.

ONE CONCRETE EXAMPLE: A modal that subscribed to an event emitter but never unsubscribed on unmount left a growing set of listener closures. Comparing snapshots across ten open-close cycles showed listener objects climbing by ten with stable retained references back to the emitter; adding the cleanup return in useEffect flattened the growth.