computed()

Creates a derived signal that evaluates a compute function and tracks any signals read during its execution. The evaluation is lazy (it does not run until read) and memoized (it only re-runs if its dependencies have changed).

function computed<T>(
  computeFn: () => T, 
  options?: ComputedOptions<T>
): ComputedSignal<T>;

ParametersCopy Anchor Link

ComputedOptionsCopy Anchor Link

ReturnsCopy Anchor Link

Returns a ComputedSignal<T> object (which is strictly read-only) with the following interface:

UsageCopy Anchor Link

Basic DerivationCopy Anchor Link

Computed functions automatically subscribe to any signals they read. If count changes, double is marked as dirty but won't re-calculate until .value is accessed.

import { signal, computed } from 'ripple-reactive';

const count = signal(2);
const double = computed(() => count.value * 2);

console.log(double.value); // 4

Custom EqualityCopy Anchor Link

By default, Ripple.js avoids triggering downstream effects if a computed value evaluates to the exact same result (===). For objects or arrays, you can provide a custom equals function to prevent unnecessary updates when the internal data hasn't logically changed.

import { signal, computed } from 'ripple-reactive';

const userFirst = signal('Aditya');
const userLast = signal('Singh');

const userProfile = computed(
  () => ({ 
    firstName: userFirst.value, 
    lastName: userLast.value 
  }),
  {
    // Deep comparison to prevent re-renders if the resulting object is identical
    equals: (prev, next) => 
      prev.firstName === next.firstName && 
      prev.lastName === next.lastName
  }
);