useRemote

Reactive remote data binding powered by Legend-State’s sync engine.

Creates an Observable<T> that fetches from and optionally pushes to a remote source. No local persistence — data lives only in memory. Returns decomposed state including loading and error observables.

Demo

statusloading...

value0

Refetch

Usage

Read-only

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

interface User {
  id: number;
  name: string;
}

function Component() {
  const { data$, isLoaded$, error$ } = useRemote<User | null>({
    get: () => fetch("/api/user").then((r) => r.json()),
    initial: null,
  });

  return (
    <div>
      {error$.get() ? (
        <div>Error: {error$.get()?.message}</div>
      ) : isLoaded$.get() ? (
        <div>{data$.get()?.name}</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
}

Read & write

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

function Component() {
  const { data$, refetch } = useRemote<{ count: number }>({
    get: () => fetch("/api/counter").then((r) => r.json()),
    set: ({ value }) =>
      fetch("/api/counter", {
        method: "PUT",
        body: JSON.stringify(value),
      }),
    initial: { count: 0 },
    debounceSet: 500,
  });

  return (
    <div>
      <span>{data$.count.get()}</span>
      <button onClick={() => data$.count.set((c) => c + 1)}>+1</button>
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

Type Declarations

export interface UseRemoteOptions<T> {
    get: () => Promise<T> | T;
    set?: (params: {
        value: T;
        changes: object[];
    }) => Promise<void> | void;
    initial?: T;
    mode?: "set" | "assign" | "merge" | "append" | "prepend";
    debounceSet?: number;
    transform?: {
        load?: (value: any) => T;
        save?: (value: T) => any;
    };
}
export interface UseRemoteReturn<T> {
    data$: Observable<T>;
    isLoaded$: ReadonlyObservable<boolean>;
    isFetching$: ReadonlyObservable<boolean>;
    error$: ReadonlyObservable<Error | undefined>;
    refetch: () => void;
}
export declare function useRemote<T>(options: UseRemoteOptions<T>): UseRemoteReturn<T>;

Source

View on GitHub

Contributors

• tigerwest

Changelog

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