Reactivity

useComputedWithControl

Computed Observable with explicit source control and manual trigger. Only recomputes when the declared source changes, providing fine-grained control over when expensive computations run.

Demo

Product search

1 runs

Search is the tracked source — typing recomputes. Category & Sort are untracked — press Apply Filters to trigger manually.

import { 
import useComputedWithControl
useComputedWithControl, 
import useObservable
useObservable } from "@usels/web";

function 
function Component(): void
Component() {
  const 
const counter$: any
counter$ = 
import useObservable
useObservable(1);
  const { 
const value$: any
value$, 
const trigger: any
trigger } = 
import useComputedWithControl
useComputedWithControl(
const counter$: any
counter$, (
count: any
count) => 
count: any
count * 2);
  // value$.get() === 2
  // When counter$ changes → value$ recomputes automatically
}

import { createComputedWithControl, observable } from "@usels/web";

function Component() {
  "use scope"
  const counter$ = observable(1);
  const { value$, trigger } = createComputedWithControl(counter$, (count) => count * 2);
}

Manual trigger

Hook
Scope

import { useComputedWithControl, useObservable } from "@usels/web";

function Component() {
  const source$ = useObservable(1);
  const { value$, trigger } = useComputedWithControl(source$, (val) => {
    return val + Math.random(); // includes non-reactive data
  });

  // trigger() forces recomputation without waiting for source change
  trigger();
}

import { createComputedWithControl, observable } from "@usels/web";

function Component() {
  "use scope"
  const source$ = observable(1);
  const { value$, trigger } = createComputedWithControl(source$, (val) => {
    return val + Math.random();
  });

  trigger();
}

Previous value (incremental computation)

Hook
Scope

import { useComputedWithControl, useObservable } from "@usels/web";

function Component() {
  const event$ = useObservable(0);
  const { value$ } = useComputedWithControl(event$, (eventValue, prev) => (prev ?? 0) + eventValue);
  // Each time event$ changes, the new value is added to the accumulated total
}

import { createComputedWithControl, observable } from "@usels/web";

function Component() {
  "use scope"
  const event$ = observable(0);
  const { value$ } = createComputedWithControl(event$, (eventValue, prev) => (prev ?? 0) + eventValue);
}

Array source

Hook
Scope

import { useComputedWithControl, useObservable } from "@usels/web";

function Component() {
  const width$ = useObservable(100);
  const height$ = useObservable(50);
  const { value$: area$ } = useComputedWithControl([width$, height$], ([w, h]) => w * h);
  // area$.get() === 5000
  // Recomputes when either width$ or height$ changes
}

import { createComputedWithControl, observable } from "@usels/web";

function Component() {
  "use scope"
  const width$ = observable(100);
  const height$ = observable(50);
  const { value$: area$ } = createComputedWithControl([width$, height$], ([w, h]) => w * h);
}

Type

export { createComputedWithControl } from "./core";
/**
 * Computed Observable with explicit source control and manual trigger.
 * Only recomputes when the declared source changes — other reactive values
 * accessed inside the getter (even via `.get()`) do not trigger recalculation.
 *
 * @param source - Reactive dependency that triggers recomputation. Accepts a plain value, Observable, or array of MaybeObservables.
 * @param fn - Getter function. Receives the current source value and previous computed value. Returns the new computed value.
 * @returns `{ value$, trigger }` — read-only computed Observable and a function to force recomputation.
 *
 * @example
 * ```tsx
 * const counter$ = observable(1);
 * const { value$ } = useComputedWithControl(counter$, (count) => count * 2);
 * // value$.get() === 2, updates when counter$ changes
 * ```
 */
export declare function useComputedWithControl<S, T>(source: Observable<S>, fn: (sourceValue: S, prev: T | undefined) => T): {
    value$: ReadonlyObservable<T>;
    trigger: Fn;
};
export declare function useComputedWithControl<T>(source: MaybeObservable<any>[], fn: (sourceValues: any[], prev: T | undefined) => T): {
    value$: ReadonlyObservable<T>;
    trigger: Fn;
};

Source

View on GitHub