Custom refs with customRef in Vue - Performance & Optimization

Performance: Custom refs with customRef

MEDIUM IMPACT

This affects how reactive state updates trigger DOM updates and component re-renders in Vue applications.

Managing reactive state with fine control over update timing

Vue

import { customRef } from 'vue';
function useDebouncedRef(value, delay = 200) {
  let timeout;
  return customRef((track, trigger) => ({
    get() {
      track();
      return value;
    },
    set(newValue) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        value = newValue;
        trigger();
      }, delay);
    }
  }));
}
const count = useDebouncedRef(0);

Updates are batched and delayed, so Vue triggers fewer reactive updates and re-renders, improving input responsiveness.

📈 Performance GainReduces reflows and repaints by batching updates, improving INP and reducing CPU usage during rapid changes.

Managing reactive state with fine control over update timing

Vue

import { ref } from 'vue';
const count = ref(0);
function increment() {
  count.value++;
}

Every change to count.value triggers immediate reactive updates and component re-renders, even if not needed right away.

📉 Performance CostTriggers 1 reflow and repaint per update, causing slower interaction responsiveness if updates are frequent.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Standard ref with immediate updates	Many reactive triggers	1 reflow per update	High paint cost on frequent changes	[X] Bad
customRef with debounced updates	Fewer reactive triggers	Single reflow per batch	Lower paint cost due to fewer updates	[OK] Good

Rendering Pipeline

Custom refs control when Vue tracks and triggers reactive updates, affecting the reactive system's scheduling of component re-renders and DOM updates.

→Reactive Tracking

→Component Render

→DOM Update

→Paint

⚠️ BottleneckComponent Render stage due to unnecessary re-renders from frequent reactive triggers.

Core Web Vital Affected

INP

This affects how reactive state updates trigger DOM updates and component re-renders in Vue applications.

Optimization Tips

1Use customRef to batch or debounce reactive updates to reduce render frequency.

2Fewer reactive triggers mean fewer reflows and repaints, improving responsiveness.

3Avoid immediate reactive updates for rapidly changing state to prevent layout thrashing.

Performance Quiz - 3 Questions

What is the main performance benefit of using customRef in Vue?

A It lets you control when reactive updates trigger component re-renders.

B It automatically caches DOM elements to avoid reflows.

C It reduces the size of the JavaScript bundle.

D It disables reactivity to improve speed.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for frequent component render events and layout recalculations.

What to look for: High number of component renders and layout thrashing indicates poor reactive update control; fewer renders with batching shows good performance.