1---
2title: Never Destructure reactive() Objects Directly
3impact: HIGH
4impactDescription: Destructuring reactive objects breaks reactivity - changes won't trigger updates
5type: capability
6tags: [vue3, reactivity, reactive, composition-api, destructuring]
7---
8 
9# Never Destructure reactive() Objects Directly
10 
11**Impact: HIGH** - Destructuring a `reactive()` object breaks the reactive connection. Updates to destructured variables won't trigger UI updates, leading to stale data display.
12 
13Vue's `reactive()` uses JavaScript Proxies to track property access. When you destructure, you extract primitive values from the proxy, losing the reactive connection. This is especially dangerous when destructuring from composables or imported state.
14 
15## Task Checklist
16 
17- [ ] Never destructure reactive objects directly if you need reactivity
18- [ ] Use `toRefs()` to convert reactive object properties to refs before destructuring
19- [ ] Consider using `ref()` instead of `reactive()` to avoid this pitfall entirely
20- [ ] When importing state from composables, check if it's reactive before destructuring
21 
22**Incorrect:**
23```javascript
24import { reactive } from 'vue'
25 
26const state = reactive({
27  count: 0,
28  name: 'Vue'
29})
30 
31// WRONG: Destructuring breaks reactivity
32const { count, name } = state
33 
34// These updates work on the original state...
35state.count++  // state.count is now 1
36 
37// ...but the destructured variables are NOT updated
38console.log(count)  // Still 0! Lost reactivity
39```
40 
41```javascript
42// WRONG: Destructuring from a composable
43function useCounter() {
44  const state = reactive({ count: 0 })
45  return state
46}
47 
48const { count } = useCounter()  // count is now a non-reactive primitive
49```
50 
51**Correct:**
52```javascript
53import { reactive, toRefs } from 'vue'
54 
55const state = reactive({
56  count: 0,
57  name: 'Vue'
58})
59 
60// CORRECT: Use toRefs() to maintain reactivity
61const { count, name } = toRefs(state)
62 
63state.count++
64console.log(count.value)  // 1 - Reactivity preserved! (note: now needs .value)
65```
66 
67```javascript
68// CORRECT: Return toRefs from composables
69function useCounter() {
70  const state = reactive({ count: 0 })
71  return toRefs(state)  // Now safe to destructure
72}
73 
74const { count } = useCounter()  // count is now a ref, reactivity preserved
75```
76 
77```javascript
78// ALTERNATIVE: Just use ref() to avoid the issue entirely
79import { ref } from 'vue'
80 
81const count = ref(0)
82const name = ref('Vue')
83 
84// No destructuring needed, no gotchas
85```
86 
87## Reference
88- [Vue.js Reactivity Fundamentals - reactive()](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive)
89- [Vue.js Reactivity API - toRefs()](https://vuejs.org/api/reactivity-utilities.html#torefs)
90