useWhenMounted

Execute a callback and expose its return value as a reactive Observable<T | undefined> — only after the component has mounted. Returns undefined during SSR and before hydration, then re-evaluates with the actual callback value once mounted. Unlike useSupported, the return value is not coerced to boolean — the full type T is preserved.

Usage

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

const windowWidth = useWhenMounted(() => window.innerWidth);

// undefined on the server, actual width after mount
console.log(windowWidth.get());

Deferred browser API access

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

const scrollY = useWhenMounted(() => window.scrollY);

Type Declarations

export type UseWhenMountedReturn<T> = Observable<T | undefined>;
export declare function useWhenMounted<T>(callback: () => T): UseWhenMountedReturn<T>;

Source

View on GitHub

Contributors

• tigerwest

Changelog

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