useIsMounted

Returns a ReadonlyObservable<boolean> that flips from false to true after the component mounts. Use as a scope-internal gate — e.g. to defer an effect, subscription setup, or a setOptions call until after mount.

Unlike useWhenMounted (which wraps a callback), this hook exposes the raw mounted flag so scope code can .peek() or .get() it conditionally inside observe().

Usage

Hook

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

function Component() {
  const isMounted$ = useIsMounted();
  return <div>{isMounted$.get() ? "mounted" : "pending"}</div>;
}

Scope

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

function Component() {
  "use scope"
  const isMounted$ = createIsMounted();
  return <div>{isMounted$.get() ? "mounted" : "pending"}</div>;
}

Gating an effect until after mount

Use .get() inside observe() so the effect re-runs when the mounted flag flips — the initial pre-mount run short-circuits, then the post-mount re-run proceeds.

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

function Component({ deps$ }: { deps$: Observable<unknown> }) {
  "use scope";
  const isMounted$ = createIsMounted();

  observe(() => {
    const deps = deps$.get();
    if (!isMounted$.get()) return; // skip pre-mount run
    applyOptions(deps);
  });

  return null;
}

Type

export { createIsMounted } from "./core";
export type UseIsMounted = typeof createIsMounted;
export declare const useIsMounted: UseIsMounted;

Source

View on GitHub