useWatchImmediate

Category

Watch

Export Size

196 B

Last Changed

5 days ago

Shorthand for watching value with { immediate: true }

Demo

Usage

Similar to useWatch, but the callback also fires once on mount with the current value.

import { useWatchImmediate } from '@reause/shared'
import { useState } from 'react'

const [obj, setObj] = useState('vue-use')

// logs 'vue-use' on mount, then the new value on every change
useWatchImmediate(obj, (updated) => {
  console.log(updated)
})

// later, from an event handler:
setObj('VueUse') // logs 'VueUse'

Type Declarations

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

export function useWatchImmediate<T extends any[]>(source: readonly [
    ...T
], callback: UseWatchCallback<[
    ...T
]>): void

export function useWatchImmediate<T>(source: T, callback: UseWatchCallback<T>): void

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

59695 - fix(shared): resolve useWatchImmediate audit findings (#767)