useObservePausable

Runs a reactive effect with built-in pause/resume controls. Built on useObserveWithFilter. The selector always tracks dependencies; only the effect execution is gated by the active state.

Demo

useObservePausable

Active

Reactive effect with pause/resume controls.

Increment count (0)

Pause

(no effect fired yet)

Usage

Hook

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

function Component() {
  const count$ = useObservable(0);

  const { isActive$, pause, resume } = useObservePausable(
    () => count$.get(),
    (value) => {
      console.log("count:", value);
    }
  );

  // Pause — changes to count$ won't trigger the effect
  pause();

  // Resume — effect fires again on changes
  resume();
}

Scope

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

function Component() {
  "use scope"
  const count$ = observable(0);

  const { isActive$, pause, resume } = observePausable(
    () => count$.get(),
    (value) => {
      console.log("count:", value);
    }
  );

  // Pause — changes to count$ won't trigger the effect
  pause();

  // Resume — effect fires again on changes
  resume();
}

Start paused

Use initialState: 'paused' to start with the effect suppressed. Call resume() whenever you’re ready to begin reacting.

Hook

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

function Component() {
  const data$ = useObservable(0);

  const { resume } = useObservePausable(
    () => data$.get(),
    (value) => {
      console.log("data:", value);
    },
    { initialState: "paused" }
  );

  // Start reacting when ready
  resume();
}

Scope

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

function Component() {
  "use scope"
  const data$ = observable(0);

  const { resume } = observePausable(
    () => data$.get(),
    (value) => {
      console.log("data:", value);
    },
    { initialState: "paused" }
  );

  // Start reacting when ready
  resume();
}

Reactive isActive$

isActive$ is an Observable — use it directly in JSX for reactive UI.

Hook

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

const count$ = useObservable(0);

function MyComponent() {
  const { isActive$, pause, resume } = useObservePausable(
    () => count$.get(),
    (value) => {
      console.log("count:", value);
    }
  );

  return (
    <Show if={isActive$} else={<button onClick={resume}>Resume</button>}>
      <button onClick={pause}>Pause</button>
    </Show>
  );
}

Scope

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

const count$ = observable(0);

function MyComponent() {
  "use scope"
  const { isActive$, pause, resume } = observePausable(
    () => count$.get(),
    (value) => {
      console.log("count:", value);
    }
  );

  return (
    <Show if={isActive$} else={<button onClick={resume}>Resume</button>}>
      <button onClick={pause}>Pause</button>
    </Show>
  );
}

Eager mode (immediate: true)

Pass immediate: true to execute the effect immediately on setup.

Hook

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

function Component() {
  const count$ = useObservable(0);

  useObservePausable(
    () => count$.get(),
    (value) => {
      console.log("value:", value);
    },
    { immediate: true }
  );
}

Scope

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

function Component() {
  "use scope"
  const count$ = observable(0);

  observePausable(
    () => count$.get(),
    (value) => {
      console.log("value:", value);
    },
    { immediate: true }
  );
}

Type

export { observePausable, type ObservePausableOptions } from "./core";
export type UseObservePausable = typeof observePausable;
/**
 * Runs a reactive effect with built-in pause/resume controls.
 *
 * Built on `watch` — lazy by default (`immediate: false`).
 * The selector always tracks deps on every change; only the effect is gated by the active state.
 *
 * @param selector - Observable, array of Observables, or reactive read function.
 * @param effect   - Side-effect callback. Suppressed while paused.
 * @param options  - `{ initialState?, immediate?, schedule? }`
 * @returns `{ isActive$, pause, resume, dispose }`
 *
 * @example
 * ```tsx twoslash
 * // @noErrors
 * import { useObservePausable } from "@usels/core";
 * import { observable } from "@legendapp/state";
 *
 * const count$ = observable(0);
 *
 * const { isActive$, pause, resume } = useObservePausable(
 *   () => count$.get(),
 *   (value) => { console.log("count:", value); }
 * );
 * ```
 */
export declare const useObservePausable: UseObservePausable;

Source

View on GitHub