Overuse of $scope.$apply() degrading performance

In AngularJS, $scope.$apply() is a crucial mechanism that synchronizes the model and view, but excessive or improper use can degrade performance significantly. In this guide, we will explore:

• What $scope.$apply() does
• Why overusing it can harm performance
• Common scenarios where $scope.$apply() is misused
• Best practices to optimize performance

---

1. Understanding $scope.$apply()

What is $scope.$apply()?

$scope.$apply() is an AngularJS method used to trigger a digest cycle manually. This cycle updates the UI whenever model data changes.

How AngularJS Normally Works Without $apply()

AngularJS automatically triggers a digest cycle in response to:
Event listeners (e.g., ng-click, ng-model)
HTTP requests ($http, $resource)
Directives (e.g., ng-repeat, ng-show)

However, when a change happens outside of AngularJS’ scope (e.g., inside setTimeout, external libraries, or event listeners), $apply() is needed to update the UI.

Example: When $apply() is Required

setTimeout(function () {
    $scope.message = "Updated after timeout";
    $scope.$apply(); // Required because setTimeout is outside AngularJS
}, 1000);

Here, without $scope.$apply(), the UI would not update because setTimeout runs outside Angular’s digest cycle.

---

2. Why Overusing $scope.$apply() Degrades Performance

Since $scope.$apply() triggers a digest cycle, calling it too frequently can slow down an application.

Performance Issues with Overuse

Triggers multiple digest cycles – If called unnecessarily, AngularJS may re-evaluate bindings multiple times.
Causes layout thrashing – When the DOM is updated frequently, the browser may reflow and repaint excessively.
Blocks UI rendering – Large digest cycles can make animations laggy and UI unresponsive.
Memory leaks – When used inside loops or frequent event listeners, it can cause memory and CPU overhead.

---

3. Common Misuses of $scope.$apply()

Let’s go through common mistakes and how to fix them.

Issue #1: Calling $apply() in Every Event Handler

Some developers call $scope.$apply() in event listeners unnecessarily, leading to redundant digest cycles.

Bad Example: Overusing $apply() in Event Listeners

document.getElementById("btn").addEventListener("click", function () {
    $scope.counter++;
    $scope.$apply(); // Unnecessary, because ng-click would handle this
});

Fix: Use AngularJS’s built-in ng-click instead:

<button ng-click="counter = counter + 1">Increase</button>

No need for $apply(), as ng-click triggers a digest automatically.

---

Issue #2: Calling $apply() in a Loop

Using $scope.$apply() inside loops creates multiple digest cycles, slowing down the app.

Bad Example: Calling $apply() in Each Iteration

for (let i = 0; i < 1000; i++) {
    $scope.items.push(i);
    $scope.$apply(); // Triggers digest 1000 times!
}

Fix: Call $apply() once after modifying all data.

for (let i = 0; i < 1000; i++) {
    $scope.items.push(i);
}
$scope.$apply(); // Triggers digest only once

---

Issue #3: Using $apply() in Timers Excessively

Calling $scope.$apply() inside setInterval can flood the digest cycle.

Bad Example: $apply() in a Timer

setInterval(function () {
    $scope.time = new Date();
    $scope.$apply(); // Runs digest every second!
}, 1000);

Fix: Use $interval, which is AngularJS-aware.

$interval(function () {
    $scope.time = new Date();
}, 1000);

This avoids unnecessary digest cycles.

---

Issue #4: Using $apply() with $timeout Unnecessarily

Since $timeout is already wrapped inside Angular’s digest cycle, $apply() is redundant.

Bad Example:

$timeout(function () {
    $scope.data = "Updated";
    $scope.$apply(); // Unnecessary, as $timeout already triggers a digest
}, 1000);

Fix: Just use $timeout:

$timeout(function () {
    $scope.data = "Updated";
}, 1000);

---

Issue #5: Overusing $apply() with External Events

Using $apply() on every event can degrade performance.

Bad Example: $apply() on Mouse Move

document.addEventListener("mousemove", function () {
    $scope.mouseX = event.clientX;
    $scope.mouseY = event.clientY;
    $scope.$apply(); // Runs a digest cycle on every mouse move!
});

Fix: Use $scope.$applyAsync() or debounce the updates.

let debounce;
document.addEventListener("mousemove", function () {
    clearTimeout(debounce);
    debounce = setTimeout(function () {
        $scope.$applyAsync(function () {
            $scope.mouseX = event.clientX;
            $scope.mouseY = event.clientY;
        });
    }, 100);
});

This reduces digest cycles, improving performance.

---

4. Optimizing Performance – Best Practices

To prevent performance issues, follow these best practices:

1. Prefer $scope.$applyAsync()

Use $scope.$applyAsync() instead of $apply() when possible. It schedules digest cycles more efficiently.

Example:

$scope.$applyAsync(function () {
    $scope.data = "Updated";
});

It delays execution, reducing unnecessary digest cycles.

---

2. Use Angular-Aware Services

Whenever possible, use Angular services like $timeout, $interval, and $http instead of plain JavaScript methods like setTimeout or setInterval.

---

3. Minimize Digest Triggers

• Avoid calling $apply() multiple times in loops.
• Batch DOM changes and update the scope once after modifications.

---

4. Use One-Way Data Binding (::) Where Possible

For static data that doesn’t change frequently, use one-time binding:

<p>{{ ::staticText }}</p>

This ensures Angular doesn’t check this variable during every digest cycle.

---

5. Summary

🔹 $scope.$apply() is used to manually trigger Angular’s digest cycle.
🔹 Overuse can cause performance degradation due to excessive re-evaluations.
🔹 Common mistakes include:

• Calling $apply() in event listeners unnecessarily
• Using $apply() in loops
• Calling $apply() inside $timeout or $interval
• Using $apply() on high-frequency events like mousemove