Skip to content

useSilentObservable

Observable augmented with a silentSet method that updates the value immediately without triggering listeners or re-renders.

Usage

import { 
import useSilentObservable
useSilentObservable } from "@usels/web";

const 
const count$: any
count$ = 
import useSilentObservable
useSilentObservable(0);

// silentSet — updates value immediately, no listeners or re-renders
const count$: any
count$.
any
silentSet(5);
const count$: any
count$.
any
peek(); // 5

// Standard set — triggers listeners and re-renders as usual
const count$: any
count$.
any
set(10);
const count$: any
count$.
any
get(); // 10

Skipping onChange during internal updates

import { 
import useSilentObservable
useSilentObservable } from "@usels/web";

const 
const position$: any
position$ = 
import useSilentObservable
useSilentObservable({ 
x: number
x: 0, 
y: number
y: 0 });

// Update position without notifying subscribers (e.g. during a drag loop)
const position$: any
position$.
any
silentSet({ 
x: number
x: 100, 
y: number
y: 200 });

// When ready to notify (e.g. on drag end), use standard set
const position$: any
position$.
any
set({ 
x: number
x: 100, 
y: number
y: 200 });

Using `setSilently` directly (Legend-State built-in)

Legend-State provides a setSilently utility function that works on any Observable. If you only need a one-off silent update without a dedicated hook, you can use it directly.

import { 
function observable<T>(): Observable<T | undefined> (+2 overloads)
observable, 
function setSilently(value$: ObservableParam, newValue: any): any
setSilently } from "@legendapp/state";

const 
const count$: any
count$ = 
observable<unknown>(value: Promise<unknown> | (() => unknown) | unknown): any (+2 overloads)
observable(0);

function setSilently(value$: ObservableParam, newValue: any): any
setSilently(
const count$: any
count$, 5); // value is now 5, no listeners fire
const count$: any
count$.
any
peek(); // 5

Type Declarations

export type SilentObservable<T> = Observable<T> & {
    silentSet: (value: T) => void;
};
export declare function useSilentObservable<T>(initialValue: T): SilentObservable<T>;

Source

Contributors

tigerwest

Changelog

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