---
title: "Dependencies and tracking in computed observables"  
description: "Dependencies and tracking in computed observables"  
author: "ICSM Computer"  
published: 2025-04-23  
updated: 2025-04-23  
canonical: https://www.mindstick.com/interview/34047/dependencies-and-tracking-in-computed-observables  
category: "knockcout js"  
tags: ["knockout.js", "knockout observables", "knockout.js data-binding"]  
reading_time: 4 minutes  

---

# Dependencies and tracking in computed observables

Understanding **dependencies and tracking in** `ko.computed` **observables** is key to unlocking Knockout's full reactive power.

### What Is a `computed` Observable?

A `ko.computed` observable is a **derived value** that automatically updates whenever its dependencies (observables) change.

Think of it like a spreadsheet formula — change the input cells, and the result cell updates automatically.

### How Dependency Tracking Works

Knockout **automatically tracks** any observables you reference inside a `computed` function. When those observables change, the computed value **re-evaluates itself**.

## Basic Example:

```javascript
function ViewModel() {
  this.firstName = ko.observable("Alice");
  this.lastName = ko.observable("Smith");

  this.fullName = ko.computed(() => {
    return this.firstName() + " " + this.lastName();
  });
}
```

1. When either `firstName` or `lastName` changes, `fullName` auto-updates.
2. You don’t have to tell Knockout what the dependencies are — it **figures it out** from your usage.

## Key Rule:

> Any `ko.observable` or `ko.computed` called inside a `ko.computed` becomes a **dependency**.

## Dependency Example

```javascript
let a = ko.observable(2);
let b = ko.observable(3);

let sum = ko.computed(() => {
  console.log("Computed running");
  return a() + b();
});

console.log(sum()); // Logs: "Computed running" + 5
a(5);
console.log(sum()); // Logs: 8 (re-runs automatically)
```

Notice: `"Computed running"` only logs when one of its dependencies is accessed/changed.

### Manual Re-evaluation? Not Needed!

You **don't call** `sum()` to recalculate. Just call it to get the current value — Knockout handles updates automatically.

### Ignored Observables?

If you reference an observable **outside** the `computed`, it won’t be tracked.

```javascript
let outside = ko.observable(10);
let result = ko.computed(() => {
  return 5; // does not use `outside()`, so no tracking
});
```

### Advanced: `pureComputed`

Use `ko.pureComputed()` if you want a computed that’s:

1. Lazily evaluated
2. Doesn’t track dependencies until someone subscribes to it

```javascript
let message = ko.pureComputed(() => {
  console.log("Pure computed evaluated");
  return a() > 10 ? "High" : "Low";
});
```

#### Summary

| Feature | Behavior |
| --- | --- |
| `ko.computed()` | Tracks accessed observables and re-evaluates when they change |
| Auto-tracking | Dependencies are inferred from code |
| Lazy re-evaluation | Only runs when needed |
| `ko.pureComputed()` | More performant, no initial subscriptions |

## Answers

### Answer by ICSM Computer

Understanding **dependencies and tracking in** `ko.computed` **observables** is key to unlocking Knockout's full reactive power.

### What Is a `computed` Observable?

A `ko.computed` observable is a **derived value** that automatically updates whenever its dependencies (observables) change.

Think of it like a spreadsheet formula — change the input cells, and the result cell updates automatically.

### How Dependency Tracking Works

Knockout **automatically tracks** any observables you reference inside a `computed` function. When those observables change, the computed value **re-evaluates itself**.

## Basic Example:

```javascript
function ViewModel() {
  this.firstName = ko.observable("Alice");
  this.lastName = ko.observable("Smith");

  this.fullName = ko.computed(() => {
    return this.firstName() + " " + this.lastName();
  });
}
```

1. When either `firstName` or `lastName` changes, `fullName` auto-updates.
2. You don’t have to tell Knockout what the dependencies are — it **figures it out** from your usage.

## Key Rule:

> Any `ko.observable` or `ko.computed` called inside a `ko.computed` becomes a **dependency**.

## Dependency Example

```javascript
let a = ko.observable(2);
let b = ko.observable(3);

let sum = ko.computed(() => {
  console.log("Computed running");
  return a() + b();
});

console.log(sum()); // Logs: "Computed running" + 5
a(5);
console.log(sum()); // Logs: 8 (re-runs automatically)
```

Notice: `"Computed running"` only logs when one of its dependencies is accessed/changed.

### Manual Re-evaluation? Not Needed!

You **don't call** `sum()` to recalculate. Just call it to get the current value — Knockout handles updates automatically.

### Ignored Observables?

If you reference an observable **outside** the `computed`, it won’t be tracked.

```javascript
let outside = ko.observable(10);
let result = ko.computed(() => {
  return 5; // does not use `outside()`, so no tracking
});
```

### Advanced: `pureComputed`

Use `ko.pureComputed()` if you want a computed that’s:

1. Lazily evaluated
2. Doesn’t track dependencies until someone subscribes to it

```javascript
let message = ko.pureComputed(() => {
  console.log("Pure computed evaluated");
  return a() > 10 ? "High" : "Low";
});
```

#### Summary

| Feature | Behavior |
| --- | --- |
| `ko.computed()` | Tracks accessed observables and re-evaluates when they change |
| Auto-tracking | Dependencies are inferred from code |
| Lazy re-evaluation | Only runs when needed |
| `ko.pureComputed()` | More performant, no initial subscriptions |


---

Original Source: https://www.mindstick.com/interview/34047/dependencies-and-tracking-in-computed-observables

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.