Using $watch on complex objects causing slow UI

In AngularJS, $watch is used to observe changes in model data. However, watching complex objects (like deep-nested objects or large arrays) can significantly slow down the UI due to excessive digest cycles.

This guide will explain why watching complex objects slows down AngularJS and how to fix it efficiently.

---

1. How $watch Works in AngularJS?

• $watch tracks changes in a variable or an expression and triggers a callback when it detects a modification.
• If watching a primitive value (like a number or string), AngularJS only compares the new value with the old value.
• If watching an object or array, AngularJS deeply checks all properties, causing performance issues in large datasets.

---

2. Why Watching Complex Objects Slows Down the UI?

Symptoms of UI Slowness

• Laggy UI when updating objects or lists.
• High CPU usage due to frequent digest cycles.
• Excessive watchers causing a slow page.
• Performance drops in large data tables, charts, or lists.

Example: Watching a Complex Object in AngularJS

$scope.data = { name: "John", age: 25, address: { city: "New York" } };

$scope.$watch('data', function (newValue, oldValue) {
    console.log("Data changed:", newValue);
}, true); // Deep watch (causes performance issues!)

Issue: The third argument true enables deep watching, making AngularJS compare all properties inside $scope.data, causing UI lag.

---

3. Common Mistakes & Optimized Solutions

Mistake 1: Using Deep Watch (true) on Large Objects

Bad Example (Deep Watching an Object)

$scope.largeObject = {
    users: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }],
    settings: { theme: "dark", notifications: true }
};

// Deep watching this large object slows down performance
$scope.$watch('largeObject', function (newVal, oldVal) {
    console.log("Object changed:", newVal);
}, true);

Problem: AngularJS checks every nested property in $scope.largeObject, even if only a single property changes.

---

Solution 1: Watch Only Specific Properties Instead

$scope.$watch('largeObject.settings.theme', function (newVal, oldVal) {
    console.log("Theme changed to:", newVal);
});

Why? This reduces unnecessary checks by watching only settings.theme, not the entire object.

---

Mistake 2: Watching Large Arrays with Deep Watch

Bad Example (Watching an Entire Array)

$scope.users = [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }];

$scope.$watch('users', function (newVal, oldVal) {
    console.log("Users changed:", newVal);
}, true); // Deep watch on array (bad practice!)

Problem: If only one user is modified, AngularJS compares all users, leading to slow performance.

---

Solution 2: Use $watchCollection() for Arrays

Instead of deep-watching an array, use $watchCollection(), which only tracks changes at the first level (shallow watch).

$scope.$watchCollection('users', function (newUsers, oldUsers) {
    console.log("Users list changed:", newUsers);
});

Why? $watchCollection() only detects changes in the array structure (e.g., adding/removing elements) and does not deeply check every object inside.

---

Mistake 3: Using $watch When $scope.$apply() is Enough

Bad Example (Unnecessary $watch)

$scope.data = { count: 0 };

$scope.$watch('data.count', function (newVal) {
    console.log("Count changed:", newVal);
});

// A button click updates count
$scope.increment = function () {
    $scope.data.count++;
};

Problem: Every time $scope.data.count changes, $watch triggers an extra digest cycle.

---

Solution 3: Use $scope.$apply() Instead

$scope.increment = function () {
    $scope.$apply(function () {
        $scope.data.count++;
    });
};

Why? $apply() updates Angular’s digest cycle only when needed, preventing unnecessary watchers.

---

Mistake 4: Watching Objects Inside Loops

Bad Example (Watching Every List Item)

$scope.users.forEach(user => {
    $scope.$watch(() => user.name, function (newVal, oldVal) {
        console.log("User changed:", newVal);
    });
});

Problem: If the array has 1000 users, this creates 1000 watchers, significantly slowing down the UI.

---

Solution 4: Use Events Instead of $watch

Instead of watching every object, use events to trigger updates efficiently.

$scope.$on('userUpdated', function (event, user) {
    console.log("User updated:", user);
});

// Trigger event when a user updates
$scope.updateUser = function (user) {
    user.name = "Updated Name";
    $scope.$broadcast('userUpdated', user);
};

Why? Events are lighter than $watch and prevent unnecessary digest cycles.

---

4. Best Practices to Avoid UI Slowness

Issue	Solution
Watching large objects with { deep: true }	Watch only specific properties
Watching large arrays deeply	Use $watchCollection()
Using $watch for simple updates	Use $scope.$apply() or $timeout() instead
Watching every item in a list	Use events ($on, $broadcast) instead
Too many $watch expressions slowing down digest cycles	Reduce watcher count using one-time bindings (::)