Caching in Object Design - Learning Module

Loading content...

0/246

Caching Computed Properties

The Hidden Cost of Derived Values

Every time you call order.totalPrice, should the system iterate through all line items and sum them? Every time you access user.displayName, should it concatenate first and last names? These computed properties—values derived from other data—are accessed far more frequently than they change.

Without caching, computed properties recalculate on every access. In hot paths accessed thousands of times per second, this redundancy becomes a measurable performance drain. Yet naive caching of computed values introduces a dangerous problem: cache invalidation.

This page explores how to cache computed properties effectively while maintaining data consistency. You'll learn patterns for automatic invalidation, dependency tracking, and the architectural decisions that make cached computations both fast and correct.

What You Will Learn

By the end of this page, you will understand when and why to cache computed properties, implement self-invalidating cached properties, design dependency tracking systems for complex computed values, and apply reactive caching patterns used in modern frameworks.

Understanding Computed Properties

A computed property is a value derived from one or more source properties. Unlike stored properties that hold data directly, computed properties calculate their value dynamically.

Examples of Computed Properties:

computed-properties-examples.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class Person {
    firstName: string;
    lastName: string;
    birthDate: Date;
    
    // Computed from firstName + lastName
    get fullName(): string {
        return `${this.firstName} ${this.lastName}`;
    }
    
    // Computed from birthDate + current date
    get age(): number {
        const today = new Date();
        let age = today.getFullYear() - this.birthDate.getFullYear();
        const monthDiff = today.getMonth() - this.birthDate.getMonth();
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < this.birthDate.getDate())) {
            age--;
        }
        return age;
    }
}
 
class ShoppingCart {
    items: CartItem[];
    
    // Computed from all items - potentially expensive
    get subtotal(): number {
        return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
    }
    
    get taxAmount(): number {
        return this.subtotal * 0.08;  // Calls subtotal again!
    }
    
    get total(): number {
        return this.subtotal + this.taxAmount;  // Subtotal calculated 3x!
    }
}

Cascading Recomputation

Notice how total depends on subtotal, which is recalculated for each access. With 100 cart items, a single call to total iterates the items array three times! Caching intermediate results eliminates this redundancy.

The Caching Decision:

Not all computed properties benefit from caching. Consider:

When to Cache Computed Properties
Factor	Cache	Don't Cache
Computation cost	Expensive (iterations, I/O)	Trivial (simple math)
Access frequency	High (accessed repeatedly)	Low (accessed once)
Change frequency	Low (source rarely changes)	High (constant changes)
Dependency count	Few dependencies	Many volatile dependencies
Memory impact	Reasonable cache size	Large cached objects

Basic Cached Property Implementation

The simplest approach caches the computed value and provides a manual invalidation method:

Manual Invalidation Pattern:

manual-invalidation.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class ShoppingCart {
    private _items: CartItem[] = [];
    private _subtotalCache: number | null = null;
    
    get items(): readonly CartItem[] {
        return this._items;
    }
    
    get subtotal(): number {
        if (this._subtotalCache === null) {
            console.log('Computing subtotal...');
            this._subtotalCache = this._items.reduce(
                (sum, item) => sum + item.price * item.quantity, 0
            );
        }
        return this._subtotalCache;
    }
    
    // Any mutation must invalidate the cache
    addItem(item: CartItem): void {
        this._items.push(item);
        this.invalidateCache();
    }
    
    removeItem(itemId: string): void {
        this._items = this._items.filter(i => i.id !== itemId);
        this.invalidateCache();
    }
    
    updateQuantity(itemId: string, quantity: number): void {
        const item = this._items.find(i => i.id === itemId);
        if (item) {
            item.quantity = quantity;
            this.invalidateCache();
        }
    }
    
    private invalidateCache(): void {
        this._subtotalCache = null;
    }
}

Decorator-Based Cached Properties:

To reduce boilerplate, create a reusable decorator for cached properties:

cached-property-decorator.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// Decorator that caches property values until invalidated
function CachedProperty(invalidateOn?: string[]) {
    return function (
        target: any,
        propertyKey: string,
        descriptor: PropertyDescriptor
    ) {
        const getter = descriptor.get;
        if (!getter) {
            throw new Error('@CachedProperty can only be applied to getters');
        }
        
        const cacheKey = Symbol(`__cached_${propertyKey}`);
        const validKey = Symbol(`__valid_${propertyKey}`);
        
        descriptor.get = function () {
            if (!this[validKey]) {
                this[cacheKey] = getter.call(this);
                this[validKey] = true;
            }
            return this[cacheKey];
        };
        
        // Add invalidation method
        if (!target.__invalidateCache) {
            target.__invalidateCache = function (property?: string) {
                if (property) {
                    const validSymbol = Symbol.for(`__valid_${property}`);
                    this[validSymbol] = false;
                } else {
                    // Invalidate all cached properties
                    Object.getOwnPropertySymbols(this).forEach(sym => {
                        if (sym.description?.startsWith('__valid_')) {
                            this[sym] = false;
                        }
                    });
                }
            };
        }
        
        return descriptor;
    };
}
 
// Usage
class Order {
    items: OrderItem[] = [];
    
    @CachedProperty()
    get subtotal(): number {
        return this.items.reduce((sum, i) => sum + i.price * i.quantity, 0);
    }
    
    @CachedProperty()
    get tax(): number {
        return this.subtotal * 0.08;  // Uses cached subtotal
    }
    
    @CachedProperty()
    get total(): number {
        return this.subtotal + this.tax;  // Uses cached values
    }
    
    addItem(item: OrderItem): void {
        this.items.push(item);
        (this as any).__invalidateCache();  // Invalidate all
    }
}

Automatic Dependency Tracking

Manual invalidation is error-prone—developers must remember to invalidate caches whenever source data changes. Modern reactive systems solve this through automatic dependency tracking.

Observable Properties with Computed Values:

reactive-computed.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
// Simple reactive system with automatic invalidation
class Observable<T> {
    private _value: T;
    private subscribers: Set<() => void> = new Set();
    
    constructor(initial: T) {
        this._value = initial;
    }
    
    get value(): T {
        // Track that this observable was read
        Computed.trackDependency(this);
        return this._value;
    }
    
    set value(newValue: T) {
        if (this._value !== newValue) {
            this._value = newValue;
            this.notify();
        }
    }
    
    subscribe(callback: () => void): () => void {
        this.subscribers.add(callback);
        return () => this.subscribers.delete(callback);
    }
    
    private notify(): void {
        this.subscribers.forEach(cb => cb());
    }
}
 
class Computed<T> {
    private static currentComputation: Computed<any> | null = null;
    
    private _value: T | undefined;
    private _isValid: boolean = false;
    private dependencies: Set<Observable<any>> = new Set();
    
    constructor(private readonly compute: () => T) {}
    
    static trackDependency(observable: Observable<any>): void {
        if (Computed.currentComputation) {
            Computed.currentComputation.dependencies.add(observable);
            observable.subscribe(() => {
                Computed.currentComputation!.invalidate();
            });
        }
    }
    
    get value(): T {
        if (!this._isValid) {
            // Clear old dependencies
            this.dependencies.clear();
            
            // Track dependencies during computation
            const previousComputation = Computed.currentComputation;
            Computed.currentComputation = this;
            
            try {
                this._value = this.compute();
                this._isValid = true;
            } finally {
                Computed.currentComputation = previousComputation;
            }
        }
        return this._value!;
    }
    
    private invalidate(): void {
        this._isValid = false;
    }
}
 
// Usage - automatic invalidation!
const quantity = new Observable(2);
const price = new Observable(10);
 
const total = new Computed(() => quantity.value * price.value);
 
console.log(total.value);  // 20 (computed)
console.log(total.value);  // 20 (cached)
 
price.value = 15;  // Automatically invalidates total
console.log(total.value);  // 30 (recomputed)

How Frameworks Do It

This is the core mechanism behind Vue's reactivity system, MobX observables, and SolidJS signals. They automatically track which observables a computed value depends on and invalidate the cache when any dependency changes.

Version-Based Cache Invalidation

An alternative to dependency tracking is version-based invalidation. Each source property maintains a version counter that increments on change. Cached values store the version when computed and check validity against current versions.

Version-Based Caching:

version-based-cache.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
class VersionedCache<T> {
    private cachedValue: T | undefined;
    private cachedVersion: number = -1;
    
    constructor(
        private readonly compute: () => T,
        private readonly getVersion: () => number
    ) {}
    
    get value(): T {
        const currentVersion = this.getVersion();
        
        if (this.cachedVersion !== currentVersion) {
            this.cachedValue = this.compute();
            this.cachedVersion = currentVersion;
        }
        
        return this.cachedValue!;
    }
    
    invalidate(): void {
        this.cachedVersion = -1;
    }
}
 
// Domain object with versioned caching
class Document {
    private _version: number = 0;
    private _content: string = '';
    private _wordCountCache: VersionedCache<number>;
    private _readingTimeCache: VersionedCache<number>;
    
    constructor() {
        this._wordCountCache = new VersionedCache(
            () => this._content.split(/\s+/).filter(w => w.length > 0).length,
            () => this._version
        );
        
        this._readingTimeCache = new VersionedCache(
            () => Math.ceil(this.wordCount / 200),  // ~200 words per minute
            () => this._version
        );
    }
    
    get content(): string {
        return this._content;
    }
    
    set content(value: string) {
        if (this._content !== value) {
            this._content = value;
            this._version++;  // Increment version, caches auto-invalidate
        }
    }
    
    get wordCount(): number {
        return this._wordCountCache.value;
    }
    
    get readingTimeMinutes(): number {
        return this._readingTimeCache.value;
    }
}

Advantages of Version-Based Invalidation:

•Simpler implementation — No need for complex dependency tracking graphs
•Efficient validity check — Single integer comparison vs. traversing dependencies
•Batched invalidation — Multiple changes increment version once at end
•Serializable — Version numbers can be persisted and restored

Best Practices and Anti-Patterns

Best Practices

•Profile before caching — Measure actual computation cost. Trivial getters don't need caching.
•Keep computed values immutable — Cached objects should not be mutated externally.
•Document invalidation contracts — Make clear which mutations trigger cache invalidation.
•Consider cache composition — When computed B depends on computed A, cache both to avoid redundant work.
•Test invalidation paths — Ensure all mutation paths properly invalidate dependent caches.

Anti-Patterns to Avoid

•Caching values with external dependencies — Time-dependent or context-dependent values may return stale results.
•Forgetting to invalidate — Missing invalidation calls cause subtle consistency bugs.
•Over-caching cheap computations — Cache overhead may exceed computation cost.
•Caching mutable objects — Consumers may mutate cached objects, corrupting state.

Page Complete

You now understand how to cache computed properties effectively—from manual invalidation to automatic dependency tracking to version-based approaches. Next, we'll explore treating cache as a first-class collaborator in your object designs, with explicit cache dependencies and lifecycle management.