Avoiding Memory Leaks in AngularJS

हम एक critical और अक्सर नज़रअंदाज़ किए जाने वाले topic पर आए हैं:

🧠 Avoiding Memory Leaks in AngularJS

(Slow App? Freeze हो रहा UI? Ho sakta hai memory leak हो…)

---

❗ Memory Leak क्या होता है?

Memory Leak का मतलब होता है कि आपकी App की memory use होती जा रही है, लेकिन release नहीं हो रही।

इसका result:

• App धीरे-धीरे slow हो जाती है
• Browser tab freeze या crash हो सकता है
• Mobile devices पर बहुत जल्दी performance degrade होता है

---

📌 AngularJS में Memory Leak क्यों होता है?

AngularJS में memory leaks ज़्यादातर इन कारणों से होते हैं:

कारण	Example
🔁 Unremoved Watchers	$scope.$watch() लगा लेकिन कभी $destroy() नहीं किया
🧷 DOM Event listeners जो remove नहीं हुए	element.on() लगाया, but remove नहीं किया
📦 Services या Factories में cached data	Heavy data store और कभी clear नहीं किया
👶 Child Scopes जो destroy नहीं हुए	ng-if, ng-repeat के पुराने scopes memory में रह गए
🧩 Third-party plugins	jQuery या charts जो DOM में बचे रह गए

---

✅ 1. $scope.$watch() के साथ Cleanup करें

Bad:

$scope.$watch('data', function(newVal) {
  // callback
});

Better:

var unwatch = $scope.$watch('data', function(newVal) {
  // callback
});

$scope.$on('$destroy', function() {
  unwatch(); // cleanup watcher
});

---

✅ 2. DOM Event Listeners Cleanup करें

Bad:

element.on('click', handler);

Better:

element.on('click', handler);

$scope.$on('$destroy', function() {
  element.off('click', handler); // prevent memory leak
});

---

✅ 3. Use ng-if Instead of ng-show for Dynamic DOM

Directive	Scope Behavior
ng-show	DOM रहता है, बस visibility बदलती है
ng-if	DOM और scope destroy हो जाते हैं when condition is false ✅

<!-- Better -->
<div ng-if="isVisible">
  <!-- Child scope create होगा और destroy भी होगा -->
</div>

---

✅ 4. $interval / $timeout Cleanup करना

Bad:

$interval(function() {
  // repeating task
}, 1000);

Better:

var timer = $interval(function() {
  // repeating task
}, 1000);

$scope.$on('$destroy', function() {
  $interval.cancel(timer);
});

---

✅ 5. Use $scope.$on('$destroy', ...) हर directive/component में

यह सबसे जरूरी step है।

$scope.$on('$destroy', function() {
  // यहाँ आप हर cleanup करें: watcher, listener, timer, etc.
});

---

✅ 6. Avoid Too Many Watchers

• हर {{ }}, ng-model, और $watch() एक watcher बनाता है
• ज्यादा watchers = slow digest cycle = memory pressure
• Use one-time binding (::) जहां possible हो

---

✅ 7. Avoid Memory Leaks from Third-Party Libraries

• अगर आप jQuery plugins, charts, sliders या external libraries use कर रहे हैं — make sure कि आप:
  • plugin destroy कर रहे हैं on $destroy
  • unnecessary DOM nodes remove कर रहे हैं

Example (e.g., jQuery plugin):

$scope.$on('$destroy', function() {
  $(element).plugin('destroy'); // plugin-specific cleanup
});

---

🧠 Debugging Tip: Watcher Count चेक करें

function countWatchers() {
  var root = angular.element(document).injector().get('$rootScope');
  var watchers = [];
  var f = function(scope) {
    if (scope.$$watchers) {
      watchers = watchers.concat(scope.$$watchers);
    }
    if (scope.$$childHead) f(scope.$$childHead);
    if (scope.$$nextSibling) f(scope.$$nextSibling);
  };
  f(root);
  return watchers.length;
}
console.log("Total Watchers:", countWatchers());

अगर ये number लगातार बढ़ रहा है – memory leak हो सकता है!

---

🧠 अभ्यास प्रश्न (Exercise)

1. $scope.$watch() से memory leak कैसे हो सकता है?
2. $interval को बंद करने का सही तरीका क्या है?
3. ng-if क्यों ज़्यादा memory-friendly होता है?

---

✅ आपने क्या सीखा?

• AngularJS apps में memory leak के मुख्य कारण
• Cleanup strategies: $watch, DOM listeners, $interval, etc.
• DOM destroy करने के लिए ng-if का use
• $destroy event का smart use
• Watcher count और memory monitoring tips

---

🎯 अब आप अपने AngularJS apps को memory-efficient बना सकते हैं — जिससे UI fast, smooth और stable रहेगा, चाहे data कितना भी बड़ा हो।