1---
2title: Template Functions Must Be Pure Without Side Effects
3impact: MEDIUM
4impactDescription: Functions with side effects in templates cause unpredictable behavior on every re-render
5type: efficiency
6tags: [vue3, template, functions, performance, side-effects]
7---
8 
9# Template Functions Must Be Pure Without Side Effects
10 
11**Impact: MEDIUM** - Functions called in templates execute on every component re-render. Functions with side effects (modifying data, API calls, logging) will cause unpredictable behavior, performance issues, and difficult-to-debug bugs.
12 
13Template expressions including function calls are evaluated whenever the component updates. This makes them unsuitable for operations that should only happen once or that modify state.
14 
15## Task Checklist
16 
17- [ ] Keep template functions pure (same input = same output)
18- [ ] Never modify reactive state inside template functions
19- [ ] Never make API calls or async operations in template functions
20- [ ] Move side effects to event handlers, watchers, or lifecycle hooks
21- [ ] Use computed properties for derived values instead of functions when possible
22- [ ] Avoid expensive computations; use computed properties for caching
23 
24**Incorrect:**
25```vue
26<template>
27  <!-- BAD: Modifies state on every render -->
28  <p>{{ incrementAndGet() }}</p>
29 
30  <!-- BAD: API call on every render -->
31  <div>{{ fetchUserName() }}</div>
32 
33  <!-- BAD: Logging side effect -->
34  <span>{{ logAndFormat(date) }}</span>
35 
36  <!-- BAD: Expensive computation without caching -->
37  <ul>
38    <li v-for="item in filterAndSort(items)" :key="item.id">
39      {{ item.name }}
40    </li>
41  </ul>
42 
43  <!-- BAD: Random values change on every render -->
44  <p>{{ getRandomGreeting() }}</p>
45</template>
46 
47<script setup>
48import { ref } from 'vue'
49 
50const count = ref(0)
51const items = ref([/* large array */])
52 
53// BAD: Has side effect - modifies state
54function incrementAndGet() {
55  count.value++  // Side effect!
56  return count.value
57}
58 
59// BAD: Async operation in template
60async function fetchUserName() {
61  const res = await fetch('/api/user')  // Side effect!
62  return (await res.json()).name
63}
64 
65// BAD: Logging is a side effect
66function logAndFormat(date) {
67  console.log('Formatting date:', date)  // Side effect!
68  return new Date(date).toLocaleDateString()
69}
70 
71// BAD: Expensive, runs every render without caching
72function filterAndSort(items) {
73  return items
74    .filter(i => i.active)
75    .sort((a, b) => a.name.localeCompare(b.name))
76}
77 
78// BAD: Non-deterministic
79function getRandomGreeting() {
80  const greetings = ['Hello', 'Hi', 'Hey']
81  return greetings[Math.floor(Math.random() * greetings.length)]
82}
83</script>
84```
85 
86**Correct:**
87```vue
88<template>
89  <!-- OK: Pure formatting function -->
90  <p>Count: {{ count }}</p>
91  <button @click="increment">Increment</button>
92 
93  <!-- OK: Data fetched via lifecycle/watcher -->
94  <div>{{ userName }}</div>
95 
96  <!-- OK: Pure function, no side effects -->
97  <span>{{ formatDate(date) }}</span>
98 
99  <!-- OK: Computed property caches result -->
100  <ul>
101    <li v-for="item in filteredAndSortedItems" :key="item.id">
102      {{ item.name }}
103    </li>
104  </ul>
105 
106  <!-- OK: Random value set once -->
107  <p>{{ greeting }}</p>
108</template>
109 
110<script setup>
111import { ref, computed, onMounted } from 'vue'
112 
113const count = ref(0)
114const userName = ref('')
115const date = ref(new Date())
116const items = ref([/* large array */])
117 
118// Side effects in event handlers
119function increment() {
120  count.value++
121}
122 
123// Fetch data in lifecycle hook
124onMounted(async () => {
125  const res = await fetch('/api/user')
126  userName.value = (await res.json()).name
127})
128 
129// Pure function - same input, same output
130function formatDate(date) {
131  return new Date(date).toLocaleDateString()
132}
133 
134// Computed property - cached, only recalculates when dependencies change
135const filteredAndSortedItems = computed(() => {
136  return items.value
137    .filter(i => i.active)
138    .sort((a, b) => a.name.localeCompare(b.name))
139})
140 
141// Set random value once, not on every render
142const greetings = ['Hello', 'Hi', 'Hey']
143const greeting = ref(greetings[Math.floor(Math.random() * greetings.length)])
144</script>
145```
146 
147## Pure Function Guidelines
148 
149A pure function:
1501. Given the same inputs, always returns the same output
1512. Does not modify any external state
1523. Does not perform I/O operations (network, console, file system)
1534. Does not depend on mutable external state
154 
155```javascript
156// PURE - safe for templates
157function formatCurrency(amount, currency = 'USD') {
158  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
159}
160 
161function fullName(first, last) {
162  return `${first} ${last}`
163}
164 
165function isExpired(date) {
166  return new Date(date) < new Date()
167}
168 
169// IMPURE - unsafe for templates
170function logAndReturn(value) {
171  console.log(value)  // I/O
172  return value
173}
174 
175function getFromLocalStorage(key) {
176  return localStorage.getItem(key)  // External state
177}
178 
179function updateAndReturn(obj, key, value) {
180  obj[key] = value  // Mutation
181  return obj
182}
183```
184 
185## Reference
186- [Vue.js Template Syntax - Calling Functions](https://vuejs.org/guide/essentials/template-syntax.html#calling-functions)
187- [Vue.js Computed Properties](https://vuejs.org/guide/essentials/computed.html)
188