AbstractAbstractdependenciesDependencies to listen for changes to.
When any IReactiveDependency criteria is met, a change will be emitted for this ReactiveNode instance.
ProtecteddependencyCreates a new IReactiveDependency instance.
the node to listen to "nodeChanged" events for.
Optionalcomparisons: any[]Optional. Values to compare between updates to node.
dependency object.
ProtectedmemoMemoize the result of fn, scoped to this ReactiveNode instance.
Optionalcomparisons: unknown[]Two forms:
this.memo(fn, deps?) — derives the cache key
from the active getter's property name. Throws if called outside a getter or
more than once in the same getter.this.memo(key, fn, deps?) — works anywhere; required when
stacking multiple memo cells in one getter, or memoizing inside a method.Cache semantics for comparisons:
undefined: recompute whenever this ReactiveNode reproxies (a dependency
changed or a property was set on it). Useful as a "compute once per render" cache.[]: compute once and cache forever for this instance.[a, b, ...]: recompute when any cell shallow-changes using Object.is.
Tree-node cells are compared by their latest reproxy identity, so passing
this.list correctly invalidates when list mutates.class ListFilter extends ReactiveNode {
list: Card[] = [];
searchText = "";
// Keyless form
get filteredList() {
return this.memo(
() => this.list.filter((c) => c.text === this.searchText),
[this.list, this.searchText]
);
}
// Explicit-key form (e.g. when stacking two memos in one getter)
get pair() {
const a = this.memo("a", () => expensiveA(), [this.list]);
const b = this.memo("b", () => expensiveB(), [this.searchText]);
return { a, b };
}
get dependencies() { return [this.dependency(this.list)]; }
}
Memoize the result of fn, scoped to this ReactiveNode instance.
Optionalcomparisons: unknown[]Two forms:
this.memo(fn, deps?) — derives the cache key
from the active getter's property name. Throws if called outside a getter or
more than once in the same getter.this.memo(key, fn, deps?) — works anywhere; required when
stacking multiple memo cells in one getter, or memoizing inside a method.Cache semantics for comparisons:
undefined: recompute whenever this ReactiveNode reproxies (a dependency
changed or a property was set on it). Useful as a "compute once per render" cache.[]: compute once and cache forever for this instance.[a, b, ...]: recompute when any cell shallow-changes using Object.is.
Tree-node cells are compared by their latest reproxy identity, so passing
this.list correctly invalidates when list mutates.class ListFilter extends ReactiveNode {
list: Card[] = [];
searchText = "";
// Keyless form
get filteredList() {
return this.memo(
() => this.list.filter((c) => c.text === this.searchText),
[this.list, this.searchText]
);
}
// Explicit-key form (e.g. when stacking two memos in one getter)
get pair() {
const a = this.memo("a", () => expensiveA(), [this.list]);
const b = this.memo("b", () => expensiveB(), [this.searchText]);
return { a, b };
}
get dependencies() { return [this.dependency(this.list)]; }
}
Declare dependencies for other nodes in the tree to conditionally emit changes for the node.
Remarks
Only one dependency needs to change to You can build IReactiveDependency instances with ReactiveNode.dependency.
Example