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.

Practice

1. What is the main purpose of using customRef in Vue?

easy

A. To create reactive references with custom get and set behavior

B. To define a component's template

C. To register global components

D. To handle lifecycle hooks automatically

Solution

1. Step 1: Understand what customRef does

   customRef allows you to create reactive references where you control how the value is read and written.

2. Step 2: Compare with other options

   Options A, C, and D relate to other Vue features, not customRef.

3. Final Answer:

   To create reactive references with custom get and set behavior -> Option A

4. Quick Check:

   customRef = custom reactive behavior [OK]

Hint: Remember: customRef customizes reactive get/set [OK]

Common Mistakes:

• Confusing customRef with component registration
• Thinking customRef manages lifecycle hooks
• Assuming customRef defines templates

2. Which of the following is the correct way to import customRef in a Vue 3 component?

easy

A. import { CustomRef } from 'vue';

B. import customRef from 'vue';

C. import { customRef } from 'vue';

D. import * as customRef from 'vue';

Solution

1. Step 1: Recall Vue 3 import syntax

   Vue exports customRef as a named export, so it must be imported with curly braces.

2. Step 2: Check each option

   import { customRef } from 'vue'; uses correct named import syntax. import customRef from 'vue'; tries default import which is incorrect. import { CustomRef } from 'vue'; uses wrong capitalization. import * as customRef from 'vue'; imports everything as an object, which is not typical for this usage.

3. Final Answer:

   import { customRef } from 'vue'; -> Option C

4. Quick Check:

   Named import uses curly braces [OK]

Hint: Use curly braces for named imports like customRef [OK]

Common Mistakes:

• Using default import instead of named import
• Wrong capitalization of customRef
• Importing everything instead of named import

3. Given the following code, what will be logged when myRef.value = 10 is called?

import { customRef } from 'vue';

const myRef = customRef((track, trigger) => {
  let value = 0;
  return {
    get() {
      track();
      return value;
    },
    set(newValue) {
      if (newValue !== value) {
        value = newValue;
        trigger();
        console.log('Value updated');
      }
    }
  };
});

myRef.value = 10;

medium

A. Value updated

B. No output

C. Error: track is not defined

D. Value updated twice

Solution

1. Step 1: Understand the set function behavior

   The set function checks if the new value differs from the current one. Since 10 !== 0, it updates value, triggers reactivity, and logs 'Value updated'.

2. Step 2: Confirm no repeated logs or errors

   There is no repeated assignment or error in the code, so only one log occurs.

3. Final Answer:

   Value updated -> Option A

4. Quick Check:

   Set logs once on value change [OK]

Hint: Set logs only when value changes [OK]

Common Mistakes:

• Expecting no output because of track confusion
• Thinking trigger causes multiple logs
• Assuming error due to track usage

4. Identify the error in this customRef implementation:

import { customRef } from 'vue';

const myRef = customRef((track, trigger) => {
  let value = 0;
  return {
    get() {
      return value;
    },
    set(newValue) {
      value = newValue;
      trigger();
    }
  };
});

medium

A. customRef cannot be used with arrow functions

B. Missing call to trigger() inside get()

C. Value should be declared with ref()

D. Missing call to track() inside get()

Solution

1. Step 1: Check get() method for reactivity tracking

   The get() method must call track() to register dependencies. Here, it returns value without calling track(), so reactivity won't work properly.

2. Step 2: Verify other parts

   Trigger is correctly called in set(). Value does not need to be a ref inside customRef. Arrow functions are allowed.

3. Final Answer:

   Missing call to track() inside get() -> Option D

4. Quick Check:

   track() needed in get() for reactivity [OK]

Hint: Always call track() inside get() [OK]

Common Mistakes:

• Forgetting to call track() in get()
• Thinking trigger() is needed in get()
• Assuming value must be a ref inside customRef

5. You want to create a customRef that debounces updates by 300ms before triggering reactivity. Which code snippet correctly implements this behavior?

hard

A. const debouncedRef = customRef((track, trigger) => {
let value;
return {
get() {
track();
return value;
},
set(newValue) {
value = newValue;
trigger();
}
};
});

B. const debouncedRef = customRef((track, trigger) => {
let value;
let timeout;
return {
get() {
track();
return value;
},
set(newValue) {
clearTimeout(timeout);
timeout = setTimeout(() => {
value = newValue;
trigger();
}, 300);
}
};
});

C. const debouncedRef = customRef((track, trigger) => {
let value;
let timeout;
return {
get() {
return value;
},
set(newValue) {
clearTimeout(timeout);
timeout = setTimeout(() => {
value = newValue;
trigger();
}, 300);
}
};
});

D. const debouncedRef = customRef((track, trigger) => {
let value;
let timeout;
return {
get() {
track();
return value;
},
set(newValue) {
value = newValue;
clearTimeout(timeout);
timeout = setTimeout(() => {
trigger();
}, 300);
}
};
});

Solution

1. Step 1: Understand debounce logic in set()

   Debounce means delaying the update and trigger until 300ms after the last set call. The correct code clears previous timeout, sets new timeout to update value and trigger after 300ms.

2. Step 2: Check get() calls track()

   The correct code calls track() in get() to register dependencies. Missing track() in get() breaks reactivity. The remaining options either lack track(), do not debounce properly, or have incorrect debouncing logic.

3. Final Answer:

   Correctly implements debounced updates with track() in get() -> Option B

4. Quick Check:

   Debounce needs clearTimeout + delayed trigger [OK]

Hint: Debounce by delaying trigger with setTimeout and clearTimeout [OK]

Common Mistakes:

• Not calling track() inside get()
• Triggering immediately without debounce
• Setting value outside timeout causing immediate update