Memory Management in JavaScript with WeakRef and FinalizationRegistry

Today, we’re diving into the topic of memory management in JavaScript—but not in the traditional sense of garbage collection. Instead, we'll explore the powerful capabilities of WeakRef and FinalizationRegistry. These tools give developers control over weak references and asynchronous object finalization, allowing for more refined and efficient memory handling.

JavaScript’s garbage collector automatically manages memory for most objects, but certain scenarios, like caching or long-lived objects, can cause memory leaks.

If you're tired of objects lingering in memory longer than they should, or if you're looking for ways to manage resources without unnecessary memory leaks, this guide is for you. Let’s get started!

What is WeakRef?

WeakRef allows you to hold a weak reference to an object, meaning that the reference won’t prevent the object from being garbage collected if it’s no longer needed.

Syntax

1 let weakRef = new WeakRef(targetObject);

• targetObject: The object you want to reference weakly.

Unlike normal references, weak references don’t interfere with the garbage collector’s ability to clean up unused memory. However, if you attempt to access a weakly referenced object after it has been garbage collected, it will return undefined.

Example

1 let obj = { name: "WeakRef Example" };
2 let weakRef = new WeakRef(obj);
3 
4 // Accessing the object through the weak reference
5 console.log(weakRef.deref()); // { name: "WeakRef Example" }
6 
7 // After garbage collection (if obj is no longer referenced strongly)
8 obj = null;
9 console.log(weakRef.deref()); // undefined (after GC)

Use Cases

• Caches: WeakRef is useful in caching where you want to keep references to objects only if they are still in use.
• DOM Elements: Holding references to DOM elements that should be cleaned up once removed from the document.

What is FinalizationRegistry?

FinalizationRegistry allows you to register a callback to perform cleanup tasks when an object is garbage collected. This provides a way to release external resources like file handles, sockets, or database connections tied to the object.

Syntax

1 let registry = new FinalizationRegistry((heldValue) => {
2   // Cleanup code
3 });

• heldValue: A value (or resource) associated with the object that you want to clean up when it’s collected.

Example

1 let registry = new FinalizationRegistry((heldValue) => {
2   console.log(`Cleaning up ${heldValue}`);
3 });
4 
5 let obj = { name: "FinalizationRegistry Example" };
6 
7 // Register the object and associate a resource or value with it
8 registry.register(obj, "Resource1");
9 
10 // When obj is garbage collected, "Cleaning up Resource1" will be logged
11 obj = null;

Use Cases

• Resource Management: Freeing resources like file handles or network connections when the associated object is no longer needed.
• Library Cleanup: Ensuring that external libraries or tools are properly cleaned up when your objects are garbage collected.

Key Considerations

• Non-Deterministic: Garbage collection is non-deterministic, meaning you can’t predict exactly when an object will be collected. This is important to consider when using WeakRef and FinalizationRegistry.
• Limited Use Cases: WeakRef and FinalizationRegistry should not be overused. They are most useful in specific scenarios like caches, resource management, or long-running applications.

Benefits of WeakRef and FinalizationRegistry

• Prevents Memory Leaks: By using weak references, you can ensure that objects are not unintentionally kept in memory.
• Efficient Resource Management: FinalizationRegistry allows for automatic resource cleanup when objects are no longer needed.
• Better Performance: Helps reduce memory usage in large or long-lived applications by ensuring objects are cleaned up when they’re no longer in use.

Using WeakRef for Caching

WeakRef is an ideal tool for creating a cache that automatically frees up memory when an object is no longer needed. Imagine you're building a web application that loads a lot of data from an API, but you don't want this data to stay in memory indefinitely. With WeakRef, you can keep the object in memory while allowing the garbage collector to remove it when it's no longer in use.

Example

1 class Cache {
2   constructor() {
3     this.cache = new Map();
4   }
5 
6   set(key, value) {
7     // Create a weak reference to the object
8     this.cache.set(key, new WeakRef(value));
9   }
10 
11   get(key) {
12     const weakRef = this.cache.get(key);
13     if (weakRef) {
14       // Retrieve the object from the weak reference
15       const obj = weakRef.deref();
16       if (obj) {
17         console.log(`Object with key "${key}" found in cache.`);
18         return obj;
19       } else {
20         console.log(`Object with key "${key}" was garbage collected.`);
21         this.cache.delete(key); // Clear the cache if the object was removed
22       }
23     } else {
24       console.log(`Key "${key}" not found in cache.`);
25     }
26     return null;
27   }
28 }
29 
30 // Example usage:
31 const cache = new Cache();
32 let userData = { name: "Alice", age: 30 };
33 
34 cache.set("user_1", userData);
35 
36 // Manually free the object
37 userData = null;
38 
39 // Attempt to retrieve the object from the cache
40 setTimeout(() => {
41   const cachedData = cache.get("user_1");
42   if (cachedData) {
43     console.log(`Data from cache: ${cachedData.name}, ${cachedData.age}`);
44   } else {
45     console.log("Data was removed by the garbage collector.");
46   }
47 }, 1000);

This creates a cache that holds weak references to objects. If an object is no longer needed, the garbage collector removes it from memory, and the cache updates automatically. The next time you try to access the object, you’ll know if it was removed and can reload it if necessary.

Handling DOM Elements with WeakRef

Another great use case for WeakRef is working with DOM elements that might be added and removed. For example, if you're building a single-page application (SPA) where components are temporarily removed from the DOM, you can cache information about these DOM elements without worrying about them staying in memory after being removed from the document.

Example

1 class DomCache {
2   constructor() {
3     this.domElements = new Map();
4   }
5 
6   setElement(id, element) {
7     this.domElements.set(id, new WeakRef(element));
8   }
9 
10   getElement(id) {
11     const weakRef = this.domElements.get(id);
12     if (weakRef) {
13       const element = weakRef.deref();
14       if (element) {
15         console.log(`Element with ID "${id}" found in cache.`);
16         return element;
17       } else {
18         console.log(`Element with ID "${id}" was garbage collected.`);
19         this.domElements.delete(id); // Remove from cache
20       }
21     } else {
22       console.log(`Element with ID "${id}" not found.`);
23     }
24     return null;
25   }
26 }
27 
28 // Example usage:
29 const domCache = new DomCache();
30 const divElement = document.createElement("div");
31 divElement.id = "myDiv";
32 document.body.appendChild(divElement);
33 
34 domCache.setElement("myDiv", divElement);
35 
36 // Remove the element from the DOM
37 document.body.removeChild(divElement);
38 
39 // Attempt to retrieve the element through WeakRef
40 setTimeout(() => {
41   const cachedElement = domCache.getElement("myDiv");
42   if (cachedElement) {
43     console.log("Element found and still exists.");
44   } else {
45     console.log("Element was removed by the garbage collector.");
46   }
47 }, 1000);

In this example, you store a reference to the DOM element in the cache using WeakRef. When the element is removed from the DOM, it can also be removed by the garbage collector, and you'll be able to detect this.

Freeing Resources with FinalizationRegistry

Now let's move on to FinalizationRegistry. This is perfect for situations where you need to release resources, like closing files or network connections, once an object becomes unreachable.

Example

1 class FileManager {
2   constructor() {
3     this.registry = new FinalizationRegistry((fileName) => {
4       console.log(`Releasing resources for file: ${fileName}`);
5     });
6   }
7 
8   openFile(fileName) {
9     const fileObject = { name: fileName };
10     this.registry.register(fileObject, fileName);
11     return fileObject;
12   }
13 }
14 
15 // Example usage:
16 const fileManager = new FileManager();
17 let file = fileManager.openFile("myfile.txt");
18 
19 // Free the file reference
20 file = null;
21 
22 // When the garbage collector removes the object, the callback will be triggered to release resources.

In this example, we create a file and register it with FinalizationRegistry. When the object becomes unreachable, the system automatically releases the associated resources.

Cache Cleanup with FinalizationRegistry

One of my favorite use cases is automatically cleaning up the cache after an object is removed.

Example:

1 class ObjectCache {
2   constructor() {
3     this.cache = new Map();
4     this.registry = new FinalizationRegistry((key) => {
5       console.log(`Object with key "${key}" was removed. Clearing cache.`);
6       this.cache.delete(key);
7     });
8   }
9 
10   setObject(key, obj) {
11     this.cache.set(key, obj);
12     this.registry.register(obj, key);
13   }
14 
15   getObject(key) {
16     return this.cache.get(key);
17   }
18 }
19 
20 // Example usage:
21 const cache = new ObjectCache();
22 let obj = { name: "Cache me if you can" };
23 
24 cache.setObject("obj_1", obj);
25 
26 // Free the object reference
27 obj = null;
28 
29 // When the object is garbage collected, the cache will automatically be cleaned up.

In this example, we create a cache and register the objects with FinalizationRegistry. When the object becomes unreachable, the registry takes care of removing it from the cache.

Conclusion

WeakRef and FinalizationRegistry provide advanced memory management capabilities in JavaScript, allowing developers to handle memory more efficiently and avoid potential memory leaks. They are valuable tools for managing object lifecycles and cleaning up resources in modern JavaScript applications, especially when dealing with caches, event listeners, or external resources. However, they should be used judiciously to avoid performance pitfalls.