Custom refs with customRef in Vue - Step-by-Step Execution

Concept Flow - Custom refs with customRef

Call customRef factory function

↓

Create reactive ref with custom behavior

↓

Return object with get and set handlers

↓

Use ref in component

↓

Read or write triggers custom logic

↓

Update internal value and notify reactive system

This flow shows how Vue's customRef creates a reactive reference with custom get/set logic, used in components to control reactivity.

Execution Sample

Vue

import { customRef } from 'vue';

function useDebouncedRef(value, delay = 300) {
  let timeout;
  return customRef((track, trigger) => ({
    get() {
      track();
      return value;
    },
    set(newValue) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        value = newValue;
        trigger();
        timeout = undefined;
      }, delay);
    }
  }));
}

This code creates a debounced reactive ref that delays updates by a given time.

Execution Table

Step	Action	Internal Value	Timeout State	Reactive Trigger Called
1	Call useDebouncedRef('hello', 300)	'hello'	undefined	No
2	Read ref value (get)	'hello'	undefined	Track called (reactive system notified)
3	Set ref value to 'world'	'hello'	Timeout set	No (delayed)
4	Set ref value to 'vue'	'hello'	Timeout reset	No (delayed)
5	300ms delay passes	'vue'	Timeout cleared	Trigger called (reactive update)
6	Read ref value (get)	'vue'	undefined	Track called
7	Set ref value to 'done'	'vue'	Timeout set	No (delayed)
8	300ms delay passes	'done'	Timeout cleared	Trigger called
9	Read ref value (get)	'done'	undefined	Track called

💡 Execution stops after final read; reactive updates triggered after debounce delay.

Variable Tracker

Variable	Start	After 1	After 3	After 4	After 5	After 8	Final
value	'hello'	'hello'	'hello'	'hello'	'vue'	'done'	'done'
timeout	undefined	undefined	set	reset	cleared	cleared	cleared
triggerCalled	No	No	No	No	Yes	Yes	Yes

Key Moments - 3 Insights

Why doesn't the reactive system update immediately when setting the ref?

Because the set handler uses a timeout to delay updating the internal value and calling trigger(), so reactive updates happen only after the delay (see steps 3,4,5 in execution_table).

What does the track() function do inside the get handler?

track() tells Vue's reactive system that this ref was read, so it can track dependencies and update components when trigger() is called later (see steps 2 and 6).

Why is the timeout cleared and reset when setting the ref multiple times quickly?

To debounce the updates, the previous timeout is cleared so only the last set value after the delay triggers an update (see steps 3 and 4).

Visual Quiz - 3 Questions

Look at the execution_table, what is the internal value after step 5?

A 'vue'

B 'hello'

C 'world'

D 'done'

💡 Hint

Check the 'Internal Value' column at step 5 in the execution_table.

At which step does the reactive trigger get called for the first time?

A Step 3

B Step 4

C Step 5

D Step 2

💡 Hint

Look at the 'Reactive Trigger Called' column in the execution_table.

If the delay was set to 0, how would the timeout state change after setting the ref?

A Timeout would never be set

B Timeout would be set and cleared immediately

C Timeout would be set and remain until cleared manually

D Timeout would be set but trigger called immediately

💡 Hint

Consider how setTimeout with 0 delay behaves and check 'Timeout State' in variable_tracker.

Concept Snapshot

customRef(factory) creates a reactive ref with custom get/set logic.
Inside factory, use track() in get to register dependency.
Use trigger() in set to notify reactive updates.
Allows control like debouncing or throttling ref updates.
Used in Vue 3 Composition API for advanced reactivity.

Full Transcript

This visual execution traces Vue's customRef usage. First, a customRef is created with a factory function that returns get and set handlers. The get handler calls track() to register reactive dependencies, and the set handler uses a timeout to delay updating the internal value and calling trigger(), which notifies Vue's reactive system to update components. The execution table shows steps reading and setting the ref, how the internal value changes only after the debounce delay, and when the reactive trigger is called. The variable tracker follows the internal value, timeout state, and trigger calls over time. Key moments clarify why updates are delayed, the role of track(), and why timeouts reset on rapid sets. The quiz tests understanding of internal value changes, trigger timing, and timeout behavior. The snapshot summarizes customRef as a way to create reactive refs with custom behavior like debouncing in Vue 3.