toRef and toRefs for destructuring in Vue - Performance & Optimization

Performance: toRef and toRefs for destructuring

MEDIUM IMPACT

This concept affects how reactive state is accessed and updated efficiently in Vue components, impacting rendering speed and responsiveness.

Destructuring reactive state properties in Vue components

Vue

const count = toRef(reactiveState, 'count')
// count remains reactive and updates UI correctly

toRef keeps the property reactive, so changes trigger efficient re-renders.

📈 Performance GainAvoids unnecessary manual reactivity fixes and stale UI, improving INP

Destructuring reactive state properties in Vue components

Vue

const { count } = reactiveState
// Using count directly breaks reactivity

Destructuring reactive objects directly loses reactivity, causing UI not to update on changes.

📉 Performance CostTriggers stale UI updates and forces manual reactivity fixes, increasing INP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct destructuring of reactive object	No reactive tracking	Triggers full re-render on manual update	High due to forced updates	[X] Bad
Using toRef for single property	Reactive tracking preserved	Minimal reflows on change	Low paint cost due to targeted updates	[OK] Good
Using toRefs for multiple properties	Reactive tracking preserved for all	Minimal reflows on changes	Low paint cost with efficient updates	[OK] Good

Rendering Pipeline

toRef and toRefs maintain reactive bindings that Vue tracks to update the DOM only when needed.

→Reactive Dependency Tracking

→Component Render

→DOM Update

⚠️ BottleneckReactive Dependency Tracking if reactivity is lost causing manual fixes

Core Web Vital Affected

INP

This concept affects how reactive state is accessed and updated efficiently in Vue components, impacting rendering speed and responsiveness.

Optimization Tips

1Never destructure reactive objects directly; use toRef or toRefs instead.

2Use toRef for single reactive properties to keep reactivity and minimize overhead.

3Use toRefs for multiple properties to preserve reactivity automatically and efficiently.

Performance Quiz - 3 Questions

What happens if you destructure a reactive object directly without using toRef or toRefs?

A Reactivity is lost and UI does not update automatically

B Reactivity is preserved and UI updates normally

C Vue automatically converts destructured properties to refs

D The component crashes due to reactivity errors

DevTools: Vue Devtools

How to check: Open Vue Devtools, inspect component state, and verify reactive refs are tracked when using toRef/toRefs versus plain destructuring.

What to look for: Look for reactive dependency updates and component re-renders triggered by state changes.

Practice

1. What is the main purpose of toRef in Vue's Composition API?

easy

A. To convert a ref into a reactive object

B. To create reactive references for all properties of a reactive object

C. To create a reactive reference to a single property of a reactive object

D. To make a reactive object readonly

Solution

1. Step 1: Understand what toRef does

   toRef creates a reactive reference to a single property inside a reactive object, keeping reactivity when destructuring.

2. Step 2: Compare with other options

   toRefs creates refs for all properties, not just one. The other options describe different functions.

3. Final Answer:

   To create a reactive reference to a single property of a reactive object -> Option C

4. Quick Check:

   toRef = single property ref [OK]

Hint: toRef = one property ref, toRefs = all properties refs [OK]

Common Mistakes:

• Confusing toRef with toRefs
• Thinking toRef creates refs for all properties
• Assuming toRef converts refs to reactive objects

2. Which of the following is the correct syntax to destructure a reactive object state using toRefs?

easy

A. const { count, name } = toRef(state)

B. const { count, name } = toRefs(state)

C. const [count, name] = toRefs(state)

D. const count = toRefs(state).count

Solution

1. Step 1: Recall the syntax of toRefs

   toRefs returns an object with refs for each property, so destructuring with curly braces is correct.

2. Step 2: Analyze each option

   const { count, name } = toRef(state) uses toRef which returns a single ref, so destructuring multiple properties is invalid. const [count, name] = toRefs(state) uses array destructuring which is wrong. const count = toRefs(state).count accesses a property but does not destructure.

3. Final Answer:

   const { count, name } = toRefs(state) -> Option B

4. Quick Check:

   toRefs returns object of refs, use object destructuring [OK]

Hint: Use curly braces {} with toRefs for object destructuring [OK]

Common Mistakes:

• Using toRef instead of toRefs for multiple properties
• Using array destructuring with toRefs
• Not destructuring and accessing properties directly

3. Given the code:

const state = reactive({ count: 0, name: 'Vue' })
const { count } = toRefs(state)
count.value++
console.log(state.count)

What will be logged to the console?

medium

A. 0

B. An error is thrown

C. undefined

D. 1

Solution

1. Step 1: Understand reactivity with toRefs

   Destructuring with toRefs keeps the properties reactive. So count is a ref linked to state.count.

2. Step 2: Incrementing count.value updates state.count

   Increasing count.value by 1 changes state.count to 1, so logging state.count outputs 1.

3. Final Answer:

   1 -> Option D

4. Quick Check:

   toRefs keeps reactivity, so state.count = 1 [OK]

Hint: toRefs keeps reactivity; changing ref updates original object [OK]

Common Mistakes:

• Thinking destructured refs are copies, not reactive
• Forgetting to use .value to update ref
• Expecting original state to stay unchanged

4. What is wrong with this code snippet?

const state = reactive({ count: 0 })
const { count } = state
count.value++

medium

A. You cannot destructure reactive objects directly without toRefs or toRef

B. count.value++ is invalid syntax

C. reactive objects cannot have numeric properties

D. count is not reactive because reactive() was not called

Solution

1. Step 1: Identify destructuring issue

   Destructuring state directly extracts the raw value, losing reactivity. count is not a ref here.

2. Step 2: Understand why count.value++ fails

   Since count is a plain value, it has no .value property, so this causes an error.

3. Final Answer:

   You cannot destructure reactive objects directly without toRefs or toRef -> Option A

4. Quick Check:

   Destructure reactive with toRefs/toRef to keep reactivity [OK]

Hint: Always use toRefs or toRef when destructuring reactive objects [OK]

Common Mistakes:

• Destructuring reactive objects directly
• Using .value on non-ref values
• Assuming reactive() makes properties refs automatically

5. You have a reactive object user with properties firstName and lastName. You want to destructure these properties but keep them reactive and also create a computed property fullName that updates when either changes. Which approach correctly achieves this?

hard

A. const { firstName, lastName } = toRefs(user); const fullName = computed(() => `${firstName.value} ${lastName.value}`)

B. const { firstName, lastName } = user; const fullName = computed(() => `${firstName} ${lastName}`)

C. const firstName = toRef(user, 'firstName'); const lastName = toRef(user, 'lastName'); const fullName = `${firstName.value} ${lastName.value}`

D. const firstName = user.firstName; const lastName = user.lastName; const fullName = computed(() => `${firstName.value} ${lastName.value}`)

Solution

1. Step 1: Destructure with reactivity

   Using toRefs keeps firstName and lastName reactive refs when destructured.

2. Step 2: Create computed property using .value

   The computed property accesses firstName.value and lastName.value to reactively update fullName.

3. Final Answer:

   const { firstName, lastName } = toRefs(user); const fullName = computed(() => `${firstName.value} ${lastName.value}`) -> Option A

4. Quick Check:

   toRefs + computed with .value keeps reactivity [OK]

Hint: Use toRefs for destructuring and computed with .value [OK]

Common Mistakes:

• Destructuring without toRefs loses reactivity
• Using .value on non-ref values
• Not using computed for reactive derived values