Snippet

Custom Reactive Reference Implementation via CustomRef Explicit Triggers

Vue's `customRef` allows developer-managed reactive dependency tracking and notification dispatching. By decoupling mutation setting from calling `trigger()`, this pattern creates a buffered reactive ref that only notifies observers upon calling an explicit commit method.

snippet.js

javascript

import { customRef } from 'vue';
 
export function useExplicitBufferedRef(initialValue) {
  let value = initialValue;
  let dirty = false;
 
  return customRef((track, trigger) => ({
    get() {
      track();
      return value;
    },
    set(newValue) {
      if (!Object.is(value, newValue)) {
        value = newValue;
        dirty = true;
      }
    },
    commit() {
      if (dirty) {
        dirty = false;
        trigger();
      }
    }
  }));
}

vue

Breakdown

return customRef((track, trigger) => ({

Initializes a custom ref factory receiving reactive dependency hooks track and trigger.

track();

Registers active effect dependencies whenever the getter property is evaluated.

trigger();

Manually triggers subscribers to re-evaluate effects only when explicitly executed.

Previous snippet Next snippet

More Expert JavaScript exercises →

Custom Reactive Reference Implementation via CustomRef Explicit Triggers

Related