Gordon Matshwane, Jonathan Mayunga, Denvor Naidoo, Collins Matentji, and Kelvin Sakoane
24 June 2021
App development has become a major industry in recent years. With the introduction of a hybrid approach in the mobile space and with the various frameworks such as Angular, React or Vue, we tend to overlook the need to manage memory and mostly rely on the Garbage Collector. Memory management in JavaScript has thus become an important feature to keep in mind when developing apps.
Memory management in JavaScript
As any developer would know, when an object/variable/program is created, memory is automatically allocated to it and removed when it’s no longer needed. This is usually done through garbage collection.
With low-level languages such as C, this process needs to be manually determined. With high-level languages such as JavaScript, this is usually done automatically through garbage collection. The purpose of garbage collection is to monitor memory allocation and determine when a block of allocated memory is no longer needed. However, this automatic process is an approximation since the general problem of determining whether a specific piece of memory is still needed is undecidable.
Despite having a garbage collector, we can’t always rely on it to release allocated memory due to issues called “memory leaks”.
Memory leaks
Memory leaks can occur over a slow period of time and can be the fault of developers. Think of it as a pipe leak. When they occur they flood the OS and make an application slow or shut it down. This generally won’t sit well with your users and could lead to a decrease in user experience.
Here are a few examples of memory leak scenarios developers might cause:
Event Listeners
An event listener is a procedure in JS that waits for an event to occur. A simple example of an event is a user clicking the mouse or pressing a key on the keyboard.
While it’s convenient to add an event listener to perform essential actions, we sometimes forget to remove it. This leads to the same code running twice, which slows your application. Always remember to remove your event listeners.
Timeout and Intervals
We mostly use set timeout and intervals depending on which business logic we are trying to implement. However, we might forget to clear them afterwards. If we add a set interval that runs a code every two minutes and doesn’t clear the interval after leaving that page, the latter will run an unnecessary code every two minutes. This might result in errors or a waste of memory.
Subscriptions/Background Services/Third-Party Libraries
The use of external libraries such Redux, RXJS, Mobx, etc. can expose your API subscription if you don’t dispose of them after use. Some memory leaks occur when we don’t have control over the code behind the libraries we pull into our application. Use an extra tool to detect if your app has any leaks.
Global/Out of Scope Variable
Sometimes we create global variables that we only use once inside a single function, thus allocating memories to variables on global scope instead of block scope.
How to avoid memory leaks
There are a few approaches you can follow to avoid memory leaks, namely:
- Use the clear method/function to clear timeouts and intervals;
- Remove an event after or when the element or page is destroyed;
- Unsubscribe or kill background service when no longer needed;
- Use memory leak tools;
- Manually trigger garbage collector;
- Scope your variables nicely;
- Make use of peer programming, two pairs of eyes are better than one;
- Enable code review within your team, maybe someone will spot something you missed.
As mentioned previously, memory management in JavaScript is important. Especially when developing huge, enterprise apps. If not taken into consideration it can introduce quite a number of issues. Don’t let memory management damage your app. Contact us today to find out how we can help you improve your apps.