Anchor Docs

Appearance

Derivation APIs (React) ​

These React hooks are used for deriving computed values from reactive states, which trigger component re-renders when the source state changes.

Primary Derivation APIs ​

These are the main APIs for deriving values from reactive states that cause re-renders.

useDerived() ​

Derives a computed value from a reactive state. The component re-renders automatically when the dependent state changes.

typescript
// Basic derivation
function useDerived<T extends Linkable>(state: T, recursive?: boolean): T;

// With transformation
function useDerived<T extends Linkable, R>(state: T, transform: TransformFn<T, R>): R;
  • state: The reactive state to derive from.
  • recursive (optional): If true, recursively derives the computed value.
  • transform (optional): A function to transform the derived value.
  • Returns: The derived value.

useValue() ​

Derives a specific property's value from a reactive state. The component re-renders when that property changes.

typescript
function useValue<T extends State, K extends keyof T>(state: T, key: K): T[K];
  • state: The reactive state.
  • key: The property key to derive.
  • Returns: The derived value of the property.

useValueIs() ​

Checks if a specific property of a reactive state equals an expected value. The comparison re-evaluates when the property changes.

typescript
function useValueIs<T extends State, K extends keyof T>(state: T, key: K, expect: unknown): boolean;
  • state: The reactive state.
  • key: The property key to check.
  • expect: The expected value for comparison.
  • Returns: true if the property value equals the expected value, false otherwise.