WeakMap / WeakSet not preventing memory leaks

WeakMap/WeakSet Not Preventing Memory Leaks in JavaScript

WeakMap and WeakSet are specialized collections in JavaScript designed to handle objects with weak references, allowing them to be garbage collected when there are no strong references left. However, if not used properly, they do not necessarily prevent memory leaks. Let’s explore this issue in detail, covering the underlying concepts, causes, and solutions.

---

1. Understanding WeakMap and WeakSet

What are WeakMap and WeakSet?

• WeakMap: A collection of key-value pairs where the keys must be objects, and they are weakly referenced.
• WeakSet: A collection of unique objects, also weakly referenced.

🔹 Key Features:
✅ Weak references – Objects stored as keys (WeakMap) or values (WeakSet) do not prevent garbage collection.
✅ No enumeration – Unlike Map and Set, they cannot be iterated over (no .keys(), .values(), or .entries()).
✅ No size property – You cannot check the size of a WeakMap or WeakSet.

let weakMap = new WeakMap();
let obj = { name: "User" };

weakMap.set(obj, "Some value");

obj = null;  // The object is garbage collected

Once obj = null is executed, the object is lost, and the entry in weakMap disappears automatically.

---

2. How WeakMap/WeakSet Should Prevent Memory Leaks

A memory leak occurs when memory that is no longer needed is not released, leading to increased memory usage over time. Since WeakMap and WeakSet do not hold strong references to their keys or values, they should allow automatic garbage collection when an object is no longer referenced elsewhere.

Example of Memory Leak Prevention:

function createCache() {
  let cache = new WeakMap();

  return function (obj) {
    if (!cache.has(obj)) {
      cache.set(obj, Math.random());
    }
    return cache.get(obj);
  };
}

let getCachedData = createCache();
let user = { name: "Alice" };

console.log(getCachedData(user)); // Cache set
user = null; // User object can be garbage collected

In this case, since user is assigned null, the memory associated with it should be automatically freed.

---

3. Why WeakMap/WeakSet May Still Lead to Memory Leaks

Despite their advantages, WeakMap and WeakSet do not completely prevent memory leaks. Here’s why:

1️⃣ Holding onto DOM Elements That Should Be Removed

Sometimes, developers use WeakMaps for caching DOM elements. If a reference to a DOM element remains in memory (such as an event listener or global variable), it won’t be garbage collected.

❌ Bad Example:

let cache = new WeakMap();

function storeData(el, data) {
  cache.set(el, data);
}

let div = document.createElement("div");
storeData(div, { info: "test" });

document.body.appendChild(div);
document.body.removeChild(div); // The element is removed from DOM but still exists in cache

🚨 The issue: Even after removing div from the DOM, it still exists in the WeakMap, preventing it from being collected.

✅ Solution: Explicitly remove it from WeakMap:

cache.delete(div);

---

2️⃣ Circular References Can Still Cause Leaks

WeakMaps do not automatically break circular references. If two objects reference each other in a way that prevents both from being garbage collected, memory leaks can still occur.

❌ Example of Circular Reference:

let obj1 = {};
let obj2 = { ref: obj1 };
let weakMap = new WeakMap();

weakMap.set(obj1, obj2); // obj1 references obj2
weakMap.set(obj2, obj1); // obj2 references obj1

obj1 = null;
obj2 = null; // Circular reference still exists in WeakMap

🚨 Since obj1 and obj2 are still weakly referenced inside WeakMap, the circular reference keeps them in memory.

✅ Solution: Avoid circular references or use WeakRef():

const weakRef = new WeakRef(obj1);

This allows manual checking of whether the object still exists.

---

3️⃣ WeakMap Used Incorrectly with Long-Lived Objects

If WeakMap is used to store data on long-lived objects, garbage collection will never happen.

❌ Example with Long-Lived Cache:

let cache = new WeakMap();

function addUser(user) {
  cache.set(user, { data: "User Data" });
}

let user1 = { name: "John" };
addUser(user1);  // User stored in cache

// user1 reference is still held in the script

🚨 Since user1 is still referenced elsewhere, it won’t be garbage collected.

✅ Solution: Explicitly remove reference when done:

cache.delete(user1);

---

4. Best Practices to Prevent Memory Leaks with WeakMap/WeakSet

✅ 1. Always remove elements from WeakMap when they are no longer needed
Use .delete() when an object is no longer required.

weakMap.delete(obj);

✅ 2. Avoid storing DOM elements unless absolutely necessary
DOM elements should not be held in WeakMaps without proper cleanup.

✅ 3. Be cautious of circular references
If objects reference each other inside WeakMaps, garbage collection won’t happen.

✅ 4. Don’t use WeakMap for long-lived objects
WeakMap is useful for short-lived objects, but for long-lived ones, use normal Map instead.

✅ 5. Use WeakRef for finer control

let weakRef = new WeakRef(obj);
let derefObj = weakRef.deref();  // Get object reference

WeakRef gives more flexibility when handling weak references.

---