Class Computed<T>

Computed is a reactive primitive that holds a value that is computed from other reactive values. It is the base unit of reactive state.

Example

const a = new Atom(0); // same as const a = atom(0);
const b = new Atom(0);

const c = new Computed(() => a.value + b.value);

c.subscribe(() => {
    console.log("c", c.value);
});

a.subscribe(() => {
    console.log("a", a.value);
});

b.subscribe(() => {
    console.log("b", b.value);
});

a.value = 1;
// Output:
//a 1
//c 1

a.value = 2;
// Output:
//a 2
//c 2
b.value = 2;
// Output:
//b 2
//c 4

a.value = 3;
// Output:
//a 3
//c 5

a.value = 3;
// Output: nothing

Type Parameters

  • T

Hierarchy (view full)

Constructors

constructor

Properties

#cachedDependentsVersionString #currentValue #fn engine name options

Accessors

isDestroyed value valueUntracked

Methods

#areDependenciesStale #calc #getDependentsVersionString clearAllSubscribers clearSubscribers destroy equals getLastError getValue hasError hasSubscribers isStale onDestroy onHasSubscribers onNoSubscribers subscribe

Constructors

constructor

  • new Computed<T>(fn, options?): Computed<T>

  • Initializes an Atom instance with a given value.

    Type Parameters

    • T extends unknown

    Parameters

    • fn: (() => T)

      function that returns the value of the Computed

        • (): T

        • Returns T

    • Optional options: {
          compareFunction: ((a, b) => boolean);
          isHardFunction: boolean;
          name: string;
      }

      Options

      • compareFunction: ((a, b) => boolean)

        A function that compares two values for equality.

          • (a, b): boolean

          • Parameters

            Returns boolean

      • isHardFunction: boolean

        Indicates whether the computed is a hard function. If true, it prevents calling the function by comparing the string representation of the dependencies.

      • name: string

        The name of the Computed instance.

    Returns Computed<T>

Properties

Private #cachedDependentsVersionString

#cachedDependentsVersionString: string = ""

Private #currentValue

#currentValue: T

Private #fn

#fn: (() => T)

Type declaration

    • (): T

    • Returns T

engine

engine: any

name

name: string

options

options: {
    compareFunction: any;
    isHardFunction: boolean;
    name: string;
} = ...

Type declaration

  • compareFunction: any
  • isHardFunction: boolean
  • name: string

Accessors

isDestroyed

  • get isDestroyed(): boolean

  • Returns boolean

    True if the reactive item has been destroyed, false otherwise.

value

valueUntracked

  • get valueUntracked(): T

  • Returns the current value of the Computed value without tracking it for dependency management. This is useful when you want to access the value without affecting its reactive state.

    Returns T

    The current value of the Computed value.

    Example

    const a = atom(0);
    const b = atom(0);
    const c = computed(() => a.value + 1);
    const d = computed(() => c.valueUntracked + b.value);

    d.subscribe(() => {
        console.log(`d = ${d.value}`);
    });

    console.log(`c = ${c.value}`);
    // Outputs: c = 1
    a.value++;
    // a = 1
    // Outputs: nothing
    console.log(`c = ${c.value}`);
    // Outputs: c = 2

    b.value++;
    // Outputs: d = 3

Methods

Private #areDependenciesStale

Private #calc

Private #getDependentsVersionString

  • #getDependentsVersionString(): string

  • Returns a string representation of the dependencies of the Computed value.

    Returns string

clearAllSubscribers

clearSubscribers

destroy

  • destroy(): void

  • Destroys the reactive item. This method is useful for cleaning up after a reactive item that is no longer needed. It calls destroy on the engine of the reactive item, which removes all dependencies, dependents and subscribers, and marks the engine as destroyed.

    Returns void

equals

  • equals(a, b?): boolean

  • Checks if two values are equal. If the compareFn property is a function, it is used to compare the two values. If the compareFn property is not a function, the values are compared using the === operator. If the optional second argument is not provided, the value of the reactive item is used.

    Parameters

    • a: any

      The first value to compare.

    • Optional b: any

      The second value to compare. If not provided, the value of the reactive item is used.

    Returns boolean

    True if the two values are equal, false otherwise.

getLastError

getValue

  • getValue(options?): T

  • Parameters

    • Optional options: {
          untracked?: boolean;
      }

      Optional options. If untracked is false, the Computed value will be added to the getValueTracker.

      • Optional untracked?: boolean

    Returns T

    The current value of the Computed value.

hasError

  • hasError(): boolean

  • Returns true if there has been an error while calculating the value of the reactive item, false otherwise. This method returns true if the reactive item has been destroyed, if the reactive item has an error, or if the calculation of the value of the reactive item has thrown an error.

    Returns boolean

    Whether there has been an error while calculating the value of the reactive item.

hasSubscribers

isStale

  • isStale(): boolean

  • Checks whether the Computed value needs to be recalculated. A recalculation is needed if the engine's shouldRecalc property is true, if the engine has an error, or if the version string of the dependencies has changed.

    Returns boolean

    true if the Computed value needs to be recalculated, false if it does not.

onDestroy

  • onDestroy(fn): (() => void)

  • Subscribes a function to be called when the reactive item is destroyed. The function is called with no arguments.

    Parameters

    • fn: ((reactiveItem) => void)

      The function to be called.

    Returns (() => void)

    A function that unsubscribes the given function.

      • (): void

      • Returns void

onHasSubscribers

  • onHasSubscribers(fn): (() => void)

  • Subscribes a function to be called whenever a subscriber is added to the reactive item. The function is called with no arguments.

    Parameters

    • fn: (() => void)

      The function to be called.

        • (): void

        • Returns void

    Returns (() => void)

    A function that unsubscribes the given function.

      • (): void

      • Returns void

onNoSubscribers

  • onNoSubscribers(fn): (() => void)

  • Subscribes a function to be called whenever there are no longer any subscribers. The function is called with no arguments.

    Parameters

    • fn: (() => void)

      The function to be called.

        • (): void

        • Returns void

    Returns (() => void)

    A function that unsubscribes the given function.

      • (): void

      • Returns void

subscribe

  • subscribe(fn, options?): Unsubscriber

  • Subscribes a function to be called whenever the value of this reactive item changes.

    Parameters

    • fn: ((updates) => void)

      The function to be called whenever the value of this reactive item changes.

    • Optional options: {
          delay: number;
          signal: AbortSignal;
      }

      Optional options.

      • delay: number

        The delay in milliseconds before the function is called.

      • signal: AbortSignal

        The signal to abort the subscription.

    Returns Unsubscriber

Settings

Member Visibility

Theme

On This Page

constructor#cachedDependentsVersionString#currentValue#fnenginenameoptionsisDestroyedvaluevalueUntracked#areDependenciesStale#calc#getDependentsVersionStringclearAllSubscribersclearSubscribersdestroyequalsgetLastErrorgetValuehasErrorhasSubscribersisStaleonDestroyonHasSubscribersonNoSubscriberssubscribe