useWatchIgnorable

Category

Watch

Export Size

348 B

Last Changed

5 days ago

Ignorable watch — extended watch that returns ignoreUpdates(updater) / ignorePrevAsyncUpdates() / stop to ignore particular updates to the source

Demo

Usage

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

const [source, setSource] = useState('foo')

const { stop, ignoreUpdates } = useWatchIgnorable(
  source,
  v => console.log(`Changed to ${v}!`),
)

setSource('bar') // logs: Changed to bar!

ignoreUpdates(() => {
  setSource('foobar')
}) // (nothing logged)

setSource('hello') // logs: Changed to hello!

React batches state updates within one event handler, so an ignored update and a non-ignored update in the same batch collapse into a single render, which the ignore barrier skips as a whole. Let the ignored update's batch commit (return from the event handler) before making changes that must fire.

ignoreUpdates(() => {
  setSource('ignored')
})

// same batch as the ignored update → collapsed into it and skipped
setSource('logged') // (nothing logged)

// separate batch → the barrier was consumed, so this fires
setSource('after') // logs: Changed to after!

ignorePrevAsyncUpdates

ignorePrevAsyncUpdates() ignores the changes made since the last time the callback fired — as long as no other changes follow:

const { ignorePrevAsyncUpdates } = useWatchIgnorable(
  source,
  v => console.log(`Changed to ${v}!`),
)

setSource('good')
setSource('by')
ignorePrevAsyncUpdates() // (nothing logged for 'by')

setSource('prev')
ignorePrevAsyncUpdates()
setSource('after') // logs: Changed to after!

Type Declarations

Toggle

export type IgnoredUpdater = (updater: () => void) => void

export type IgnoredPrevAsyncUpdates = () => void

export interface UseWatchIgnorableReturn {
    ignoreUpdates: IgnoredUpdater;
    ignorePrevAsyncUpdates: IgnoredPrevAsyncUpdates;
    stop: () => void;
}

export interface UseWatchIgnorableOptions {
    immediate?: boolean;
    once?: boolean;
}

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

export function useWatchIgnorable<T extends any[]>(source: readonly [
    ...T
], callback: UseWatchCallback<[
    ...T
]>, options?: UseWatchIgnorableOptions): UseWatchIgnorableReturn

export function useWatchIgnorable<T>(source: T, callback: UseWatchCallback<T>, options?: UseWatchIgnorableOptions): UseWatchIgnorableReturn

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

d3cb0 - fix(shared): resolve useWatchIgnorable audit findings (#766)