Does memory tricks you?

Do you often run into memory leak problems? I don’t, but this topic is fascinating to me. Every time I try to dig into problems with memory (sometimes out of pure curiosity), I find these issues very hard to debug and quite stimulating for a developer's brain.

I’m not an expert in memory leaks, so I started gathering useful materials and examples.

Devtools

• Section about Memory in Devtools — theory about memory and leaks, along with an overview of tools in Chrome DevTools. Read the entire section 😉
• Debugging memory leaks - HTTP 203 — in this video, Jake and Surma explore how to debug and fix memory leaks in their own code

How Garbage Collector works and what about V8

• Grokking V8 closures for fun (and profit?) by Vyacheslav Egorov (2012-14) — how V8 works with closures and its performance. Low-level details about implementation, cool schemes. Key takeaways:
  • V8 creates context while entering function, not when the closure is created
  • When functions are nested, contexts can reference each other and form references chains

Cases investigations

• JavaScript closure vs. object look-up performance by Marijn Haverbeke (2012) — the author explains why they decided to rewrite CodeMirror from using a single large closure to store everything to using objects with separated functionality. Article Grokking V8 closures for fun (and profit?) by Vyacheslav Egorov (2012-14), by the way, is a response to this blog post.
• A surprising JavaScript memory leak found at Meteor by David Glasser (2013) — a great investigation into a real memory leak in a Meteor app with an example of fix. The issue was related to closures and a large object in memory that was not cleared by the Garbage Collector, even though it was no longer in use.
• Garbage collection and closures by Jake Archibald (2024) — another example of a memory leak caused by closures: how closures can prevent the Garbage Collector from clearing unnecessary objects from memory. As a bonus, links to browser bug reports addressing this behavior.

React Memory Leaks

• Sneaky React Memory Leaks: How useCallback and closures can bite you by Kevin Schiener (2024) — in our React code, there are plenty of closures (even if we don't realize it) and in most cases, everything works fine. But when we use useCallback to store a reference to a function and avoid its re-creation between renders — there could be some issues. Kevin gives a detailed explanation what happens and shares some recommendations.
• Sneaky React Memory Leaks II: Closures Vs. React Query by Kevin Schiener (2024) — another example showing how a memory leak can occur, this time using React Query. The recommendation is to simply extract everything related to useQuery into a custom hook, because each hook creates its own context for closures.
• Sneaky React Memory Leaks: How the React compiler won't save you by Kevin Schiener (2024) — React Compiler solves part of the problems for us with closures and memory leaks, but problems can still arise — Kevin highlights the issues and suggest using bind to prevent them.