Derived

A value the compiler keeps live: the result of const x = <expression reading signals> inside a component.

A value the compiler keeps live: the result of const x = <expression reading signals> inside a component. Read it as x.value or call it as x(), so {double} and {double()} both work in JSX. When the value is itself a function, calling the derived calls that function with the arguments, so a derived function stays callable.

Import#

import type { Derived } from "@shadow-js/web";

Signature#

interface Derived<T> {
  /**
   * Returns the current value, tracked. When the value is a function, calls it with `args` and
   * returns its result instead.
   */
  (...args: unknown[]): unknown;
  /** The current value, tracked: reading it inside an effect or binding subscribes that reader. */
  readonly value: T;
}

Members#

Name	Type	Description
`T`	`T`
`value`	`readonly value: T`	The current value, tracked: reading it inside an effect or binding subscribes that reader.

Examples#

import { useSignal } from "@shadow-js/core";
import { derived } from "@shadow-js/web";

function setup() {
  const [count, setCount] = useSignal(2);
  const double = derived(() => count() * 2);
  console.log(double.value); // 4
  setCount(5);
  console.log(double()); // 10
}