Custom refs with customRef in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vue component using customRef?

Consider this Vue 3 component using customRef to debounce input updates. What will be logged when the user types 'abc' quickly?

Vue

import { defineComponent, customRef } from 'vue';

export default defineComponent({
  setup() {
    const debounced = customRef((track, trigger) => {
      let timeout;
      let value = '';
      return {
        get() {
          track();
          return value;
        },
        set(newValue) {
          clearTimeout(timeout);
          timeout = setTimeout(() => {
            value = newValue;
            trigger();
            console.log('Value updated:', value);
          }, 200);
        }
      };
    });

    return { debounced };
  }
});

A Logs only 'Value updated: abc' once, 200ms after the last input

B Logs 'Value updated: a' immediately, then 'Value updated: abc' after 200ms

C Logs nothing because the debounce never triggers

D Logs 'Value updated: a', then 'Value updated: ab', then 'Value updated: abc' after 200ms each

💡 Hint

Think about how debounce delays the update until typing stops.

The customRef delays setting the value until 200ms after the last change. So only the final value 'abc' triggers the console.log once.

📝 Syntax

intermediate

Which option correctly creates a customRef that logs on get and set?

Select the code snippet that correctly implements a customRef which logs 'Getting value' on get and 'Setting value' on set.

A

customRef((track, trigger) => {
  let value = 0;
  return {
    get() {
      track();
      console.log('Getting value');
      return value;
    },
    set(newVal) {
      value = newVal;
      trigger();
      console.log('Setting value');
    }
  };
})

B

customRef((track, trigger) => {
  let value = 0;
  return {
    get() {
      console.log('Getting value');
      track();
      return value;
    },
    set(newVal) {
      console.log('Setting value');
      value = newVal;
      trigger();
    }
  };
})

C

customRef((track, trigger) => {
  let value = 0;
  return {
    get() {
      track();
      return value;
      console.log('Getting value');
    },
    set(newVal) {
      value = newVal;
      trigger();
      console.log('Setting value');
    }
  };
})

D

customRef((track, trigger) => {
  let value = 0;
  return {
    get() {
      console.log('Getting value');
      return value;
      track();
    },
    set(newVal) {
      console.log('Setting value');
      trigger();
      value = newVal;
    }
  };
})

💡 Hint

Remember that track() must be called before returning the value in get, and trigger() after setting the value.

Option B calls track() before returning the value and trigger() after setting the value, with logs in correct order. Others have logs after return or wrong order.

🔧 Debug

advanced

Why does this customRef not trigger updates correctly?

This customRef is intended to debounce updates but Vue components don't react to changes. What is the problem?

Vue

const debounced = customRef((track, trigger) => {
  let value = '';
  let timeout = null;
  return {
    get() {
      track();
      return value;
    },
    set(newValue) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        value = newValue;
        // Missing trigger call here
        console.log('Updated:', value);
      }, 300);
    }
  };
});

A The value variable should be reactive using ref() inside customRef.

B The track() function is missing in the get method, so reactivity is broken.

C The trigger() function is not called after setting the value, so Vue does not know to update.

D The timeout variable should be declared inside the set method, not outside.

💡 Hint

Check if Vue is notified when the value changes.

Without calling trigger() after updating the value, Vue's reactivity system does not detect changes and won't update components.

❓ state_output

advanced

What is the value of count after these operations with a customRef?

Given this customRef that doubles the value on set, what is the final value of count after these lines run?

count.value = 2;
count.value = 3;

Vue

import { customRef } from 'vue';

const count = customRef((track, trigger) => {
  let value = 0;
  return {
    get() {
      track();
      return value;
    },
    set(newVal) {
      value = newVal * 2;
      trigger();
    }
  };
});

A 6

B 3

C 4

D 0

💡 Hint

Remember the set multiplies the input by 2 before storing.

The last set assigns 3, which is doubled to 6. So count.value is 6.

🧠 Conceptual

expert

Which statement about Vue's customRef is true?

Choose the correct statement about customRef in Vue 3.

A customRef can only be used inside template expressions.

B customRef automatically makes the value deeply reactive without extra code.

C customRef replaces the need for computed properties in all cases.

D customRef allows you to customize how Vue tracks and triggers reactivity for a ref's value.

💡 Hint

Think about what customRef controls in Vue's reactivity.

customRef lets you define custom tracking and triggering behavior for a ref's value. It does not automatically make deep reactivity, nor replace computed, nor is it limited to templates.