1---
2title: Vue Composition API Runs Once, Unlike React Hooks
3impact: MEDIUM
4impactDescription: Understanding this difference prevents over-engineering and React patterns that don't apply
5type: gotcha
6tags: [vue3, composition-api, react-hooks, setup, stale-closure]
7---
8 
9# Vue Composition API Runs Once, Unlike React Hooks
10 
11**Impact: MEDIUM** - Vue's `setup()` or `<script setup>` executes only once per component instance, while React Hooks run on every render. Developers coming from React often apply patterns (dependency arrays, excessive memoization, useCallback) that are unnecessary and counterproductive in Vue.
12 
13Understanding this fundamental difference is crucial for writing idiomatic Vue code. Vue's approach eliminates entire categories of bugs (stale closures, exhaustive deps) that plague React applications.
14 
15## Task Checklist
16 
17- [ ] Don't implement "dependency arrays" - Vue tracks dependencies automatically
18- [ ] Don't wrap functions in "useCallback" equivalents - not needed in Vue
19- [ ] Don't use "useMemo" patterns - Vue's `computed()` handles this automatically
20- [ ] Understand that closures in Vue don't go "stale" like in React
21- [ ] Don't worry about "call order" - Vue composables can be conditional
22 
23**React Patterns to Avoid in Vue:**
24```javascript
25// These patterns are UNNECESSARY in Vue - they solve React-specific problems
26 
27// WRONG: Trying to implement dependency arrays (React pattern)
28watch(
29  [dep1, dep2, dep3],  // Vue tracks deps automatically in watchEffect
30  () => {
31    // ...
32  }
33)
34// Unless you specifically WANT to control which deps trigger the watcher,
35// prefer watchEffect() which auto-tracks
36 
37// WRONG: Memoizing callbacks like useCallback
38const memoizedHandler = computed(() => {
39  return () => doSomething(state.value)
40})
41// In Vue, just define the function normally - no memoization needed
42 
43// WRONG: Worrying about stale closures
44function useData() {
45  const data = ref(null)
46 
47  // In React, this could capture stale 'data' - NOT in Vue!
48  // Vue refs are always current
49  const handler = () => {
50    console.log(data.value)  // Always gets current value
51  }
52 
53  return { data, handler }
54}
55```
56 
57**Correct Vue Patterns:**
58```javascript
59import { ref, computed, watchEffect } from 'vue'
60 
61// CORRECT: Auto-dependency tracking with watchEffect
62const query = ref('')
63const filter = ref('all')
64 
65watchEffect(() => {
66  // Vue automatically detects that this depends on query and filter
67  // No dependency array needed!
68  fetchResults(query.value, filter.value)
69})
70 
71// CORRECT: computed() handles memoization automatically
72const expensiveResult = computed(() => {
73  // Only recalculates when dependencies actually change
74  return heavyComputation(data.value)
75})
76 
77// CORRECT: Functions don't need memoization
78function handleClick() {
79  count.value++
80}
81// Just use it directly - no useCallback wrapper needed
82// <button @click="handleClick">
83 
84// CORRECT: Closures always access current values
85const count = ref(0)
86const message = ref('')
87 
88function logState() {
89  // This always logs CURRENT values, never stale ones
90  console.log(`Count: ${count.value}, Message: ${message.value}`)
91}
92 
93setTimeout(() => {
94  logState()  // Gets current values even if called later
95}, 5000)
96```
97 
98## Vue's Advantages Over React Hooks
99 
100```javascript
101// 1. No stale closure problems
102const count = ref(0)
103 
104onMounted(() => {
105  setInterval(() => {
106    // In React: would need useRef or deps array to avoid stale value
107    // In Vue: count.value is always current
108    console.log(count.value)
109  }, 1000)
110})
111 
112// 2. Composables can be conditional
113if (featureEnabled) {
114  const { data } = useSomeFeature()  // This is FINE in Vue!
115}
116// In React: "Hooks cannot be conditional" - not a problem in Vue
117 
118// 3. No exhaustive-deps linting headaches
119watchEffect(() => {
120  // Use any reactive values - Vue tracks them all automatically
121  // No ESLint rule yelling about missing dependencies
122  doSomething(a.value, b.value, c.value)
123})
124 
125// 4. Child components don't need memoization by default
126// Vue's reactivity system only updates what actually changed
127// No need for React.memo() equivalents in most cases
128```
129 
130## When Vue Patterns Differ
131 
132```javascript
133// Setup runs once - so initialization happens once
134<script setup>
135import { ref, onMounted } from 'vue'
136 
137// This code runs ONCE when component is created
138const data = ref(null)
139console.log('Setup running')  // Only logs once
140 
141onMounted(() => {
142  console.log('Mounted')  // Only logs once
143})
144 
145// If you need something to run on every reactive change,
146// use watch or watchEffect
147watchEffect(() => {
148  // This runs when dependencies change
149  console.log('Data changed:', data.value)
150})
151</script>
152```
153 
154## Reference
155- [Composition API FAQ - Relationship with React Hooks](https://vuejs.org/guide/extras/composition-api-faq.html#relationship-with-react-hooks)
156- [Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)
157