@gluonjs/reactivity / packages/reactivity/src / effect

Function: effect()

effect<T>(callback, options?): ReactiveEffectRunner<T>

Type Parameters

T

T

Parameters

callback

() => T

options?

EffectOptions = {}

Returns

ReactiveEffectRunner<T>

Example

Run a function immediately, track the reactive values it reads, and rerun it when those dependencies change:

import {
  batch,
  effect,
  nextTick,
  ref,
  stop,
  untracked,
  type EffectDebuggerEvent,
  type EffectOptions,
  type ReactiveEffectRunner,
  type TrackOperation,
  type TriggerOperation,
} from '@gluonjs/reactivity';

const count = ref(0);
const debugEvents: EffectDebuggerEvent[] = [];
const options: EffectOptions = {
  onTrack: (event) => debugEvents.push(event),
  onTrigger: (event) => debugEvents.push(event),
};
const runner: ReactiveEffectRunner<number> = effect(() => count.value, options);
batch(() => { count.value += 1; count.value += 1; });
const snapshot = untracked(() => count.value);
await nextTick();
stop(runner);
const track: TrackOperation = 'get';
const trigger: TriggerOperation = 'set';
console.log(snapshot, debugEvents.length, track, trigger);