Atom is a reactive primitive that holds a value. 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.name, c.value);
});

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

b.subscribe(() => {
console.log(b.name, 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

  • Initializes an Atom instance with a given value.

    Type Parameters

    • T

    Parameters

    • value: T

      The initial value of the Atom.

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

      Options.

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

        A function that compares two values for equality.

          • (a, b): boolean
          • Parameters

            Returns boolean

      • name: string

        The name of the Atom.

    Returns Atom<T>

Properties

#currentValue: T
engine: any
name: string
options: {
    compareFunction: any;
    name: string;
} = ...

Type declaration

  • compareFunction: any
  • name: string

Accessors

  • get isDestroyed(): boolean
  • Returns boolean

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

  • get value(): T
  • Returns the current value of the Atom. If the engine is destroyed, an error is thrown.

    Returns T

    The current value of the Atom.

  • set value(value): void
  • Sets the value of the Atom. If the new value is the same as the current value, no action is taken. Updates the current value to the new value if they are different.

    Parameters

    • value: T

      The new value to set for the Atom.

    Returns void

  • get valueUntracked(): T
  • Returns the current value of the Atom 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 Atom.

    Example

    const a = atom(0);
    const b = atom(0);
    const c = computed(() => a.value + b.valueUntracked, {
    name: "c",
    });

    c.subscribe(() => {
    console.log(c.name, c.value);
    });
    console.log("change b.value");
    b.value++;
    b.value++;
    console.log("change a.value");
    a.value++;
    // Output: c 3
    a.value++;
    // Output: c 4

Methods

  • 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

  • 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.

  • Retrieves the current value of the Atom. If the engine is destroyed, an error is thrown. Tracks the Atom for dependency management.

    Parameters

    • Optional options: {
          untracked?: boolean;
      }

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

      • Optional untracked?: boolean

    Returns T

    The current value of the Atom.

  • 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.

  • 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

  • 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

  • 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

  • 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