Using ko.pureComputed vs Manual Subscriptions in Knockout SPAs

Problem: derived UI state in long-lived Knockout viewModels

In legacy Knockout.js single-page applications where viewModels live for the entire session and inputs change frequently, deriving UI state from observables is a common pattern. Without careful design, this leads to unnecessary re-evaluations, memory leaks from unmanaged subscriptions, and hard-to-debug performance bottlenecks.

Decision and constraints

Use ko.pureComputed for read-only derived state and reserve manual subscriptions for side effects. Constraints include Knockout 3.2+ availability, the need for automatic disposal on viewModel teardown, and avoiding unnecessary re-evaluations in high-frequency input scenarios.

Option	Dependency tracking	Caching	Auto-disposal	Side-effect support
ko.pureComputed	auto	yes	when owner GC'd and no subscribers	no
ko.computed	always	yes	manual dispose required	yes
manual ko.subscribe	explicit	no	no	yes

Concrete implementation pattern

function myViewModel() {
    this.qty = ko.observable(1);
    this.price = ko.observable(10);
    this.total = ko.pureComputed(function() {
        return this.qty() * this.price();
    }, this);
}

Bind in markup: <span data-bind='text: total'></span>. When the viewModel is no longer needed, removing bindings and nulling references allows the pure computed to auto-dispose when its owner is garbage collected and has no remaining subscribers.

Verification checklist

1. Create a minimal HTML page with Knockout 3.2+ loaded from a CDN.
2. Define two observables and a ko.pureComputed derived from them as shown above.
3. Change the observable values and open the browser console. Assert that the computed updates once and that repeat reads return the cached value without re-evaluation.
4. Use ko.isPureComputed(computed) to confirm the observable is a pure computed and not a regular computed.
5. Add a manual ko.subscribe counter alongside the pure computed and compare evaluation counts under rapid changes to observe caching and sleeping behavior.

Limitations and practical checks

• Knockout version: the sleep-and-idle behavior of ko.pureComputed requires Knockout 3.2+. Projects on earlier versions will fall back to regular computed and lose the automatic sleep feature.
• Side effects: pureComputed must remain side-effect free. Writing to observables inside the computed function can cause stack overflows or silent errors; reserve side effects for ko.computed or manual subscriptions.
• Deferred updates: enabling deferred updates changes evaluation timing from synchronous to microtask. Existing tests that assume immediate updates will need adjustment.