useWatchOnce

Category

Watch

Export Size

228 B

Last Changed

5 days ago

Shorthand for watching value with { once: true }

Demo

Usage

Similar to useWatch, but the callback triggers only once — further changes are ignored. The underlying effect stays alive; only the wrapped callback stops firing, so the source keeps being tracked without re-invoking it.

import { useWatchOnce } from '@reause/shared'

useWatchOnce(source, () => {
  // triggers only once
  console.log('source changed!')
})

Type Declarations

export interface UseWatchOnceReturn {
    stop: () => void;
}

export interface UseWatchCallback<T = any> {
    (value: T, oldValue: T | undefined): void;
}

export interface UseWatchOptions {
    immediate?: boolean;
}

export function useWatchOnce<T extends any[]>(source: readonly [
    ...T
], callback: UseWatchCallback<[
    ...T
]>, options?: UseWatchOptions): UseWatchOnceReturn

export function useWatchOnce<T>(source: T, callback: UseWatchCallback<T>, options?: UseWatchOptions): UseWatchOnceReturn

export function useWatch<T extends any[]>(source: readonly [
    ...T
], callback: UseWatchCallback<[
    ...T
]>, options?: UseWatchOptions): void

export function useWatch<T>(source: T, callback: UseWatchCallback<T>, options?: UseWatchOptions): void

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

a2af7 - fix(shared): resolve useWatchOnce audit findings (#768)