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

Search is the source — typing triggers recomputation immediately.
Category / Sort are read inside the getter but are not tracked — changing them alone does nothing.
Apply Filters calls trigger() to force recomputation with the latest category & sort values.

Computed 1 times

Coffee Mug (lifestyle)15,000won
Desk Lamp (office)35,000won
Mechanical Keyboard (electronics)89,000won
Monitor Stand (office)52,000won
Notebook (office)8,000won
Plant Pot (lifestyle)22,000won
USB-C Hub (electronics)45,000won
Wireless Mouse (electronics)29,000won

Usage

import { 
function useObservable<T>(): Observable<T | undefined> (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable } from "@legendapp/state/react";
import { 
import useComputedWithControl
useComputedWithControl } from "@usels/web";

const 
const counter$: any
counter$ = 
useObservable<unknown>(value: Promise<unknown> | (() => unknown) | unknown, deps?: React.DependencyList): any (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#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

Manual trigger

import { 
function useObservable<T>(): Observable<T | undefined> (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable } from "@legendapp/state/react";
import { 
import useComputedWithControl
useComputedWithControl } from "@usels/web";

const 
const source$: any
source$ = 
useObservable<unknown>(value: Promise<unknown> | (() => unknown) | unknown, deps?: React.DependencyList): any (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable(1);
const { 
const value$: any
value$, 
const trigger: any
trigger } = 
import useComputedWithControl
useComputedWithControl(
const source$: any
source$, (
val: any
val) => {
  return 
val: any
val + 
any
Math.
any
random(); // includes non-reactive data
});

// trigger() forces recomputation without waiting for source change
const trigger: any
trigger();

Previous value (incremental computation)

import { 
function useObservable<T>(): Observable<T | undefined> (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable } from "@legendapp/state/react";
import { 
import useComputedWithControl
useComputedWithControl } from "@usels/web";

const 
const event$: any
event$ = 
useObservable<unknown>(value: Promise<unknown> | (() => unknown) | unknown, deps?: React.DependencyList): any (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable(0);
const { 
const value$: any
value$ } = 
import useComputedWithControl
useComputedWithControl(
const event$: any
event$, (
eventValue: any
eventValue, 
prev: any
prev) => (
prev: any
prev ?? 0) + 
eventValue: any
eventValue);
// Each time event$ changes, the new value is added to the accumulated total

Array source

import { 
function useObservable<T>(): Observable<T | undefined> (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable } from "@legendapp/state/react";
import { 
import useComputedWithControl
useComputedWithControl } from "@usels/web";

const 
const width$: any
width$ = 
useObservable<unknown>(value: Promise<unknown> | (() => unknown) | unknown, deps?: React.DependencyList): any (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable(100);
const 
const height$: any
height$ = 
useObservable<unknown>(value: Promise<unknown> | (() => unknown) | unknown, deps?: React.DependencyList): any (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable(50);
const { 
any
value$: 
const area$: any
area$ } = 
import useComputedWithControl
useComputedWithControl([
const width$: any
width$, 
const height$: any
height$], ([
w: any
w, 
h: any
h]) => 
w: any
w * 
h: any
h);
// area$.get() === 5000
// Recomputes when either width$ or height$ changes

Type Declarations

export declare function useComputedWithControl<S, T>(source: MaybeObservable<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

Contributors

tigerwest

Changelog

a7392ab 2026-03-06 - feat(core,browser): add sync strategy hooks (tigerwest)