Template Functions Must Be Pure Without Side Effects
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.
Template 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.
Task Checklist
- [ ] Keep template functions pure (same input = same output)
- [ ] Never modify reactive state inside template functions
- [ ] Never make API calls or async operations in template functions
- [ ] Move side effects to event handlers, watchers, or lifecycle hooks
- [ ] Use computed properties for derived values instead of functions when possible
- [ ] Avoid expensive computations; use computed properties for caching
Incorrect:
<template>
<!-- BAD: Modifies state on every render -->
<p>{{ incrementAndGet() }}</p>
<!-- BAD: API call on every render -->
<div>{{ fetchUserName() }}</div>
<!-- BAD: Logging side effect -->
<span>{{ logAndFormat(date) }}</span>
<!-- BAD: Expensive computation without caching -->
<ul>
<li v-for="item in filterAndSort(items)" :key="item.id">
{{ item.name }}
</li>
</ul>
<!-- BAD: Random values change on every render -->
<p>{{ getRandomGreeting() }}</p>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
const items = ref([/* large array */])
// BAD: Has side effect - modifies state
function incrementAndGet() {
count.value++ // Side effect!
return count.value
}
// BAD: Async operation in template
async function fetchUserName() {
const res = await fetch('/api/user') // Side effect!
return (await res.json()).name
}
// BAD: Logging is a side effect
function logAndFormat(date) {
console.log('Formatting date:', date) // Side effect!
return new Date(date).toLocaleDateString()
}
// BAD: Expensive, runs every render without caching
function filterAndSort(items) {
return items
.filter(i => i.active)
.sort((a, b) => a.name.localeCompare(b.name))
}
// BAD: Non-deterministic
function getRandomGreeting() {
const greetings = ['Hello', 'Hi', 'Hey']
return greetings[Math.floor(Math.random() * greetings.length)]
}
</script>Correct:
<template>
<!-- OK: Pure formatting function -->
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
<!-- OK: Data fetched via lifecycle/watcher -->
<div>{{ userName }}</div>
<!-- OK: Pure function, no side effects -->
<span>{{ formatDate(date) }}</span>
<!-- OK: Computed property caches result -->
<ul>
<li v-for="item in filteredAndSortedItems" :key="item.id">
{{ item.name }}
</li>
</ul>
<!-- OK: Random value set once -->
<p>{{ greeting }}</p>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
const count = ref(0)
const userName = ref('')
const date = ref(new Date())
const items = ref([/* large array */])
// Side effects in event handlers
function increment() {
count.value++
}
// Fetch data in lifecycle hook
onMounted(async () => {
const res = await fetch('/api/user')
userName.value = (await res.json()).name
})
// Pure function - same input, same output
function formatDate(date) {
return new Date(date).toLocaleDateString()
}
// Computed property - cached, only recalculates when dependencies change
const filteredAndSortedItems = computed(() => {
return items.value
.filter(i => i.active)
.sort((a, b) => a.name.localeCompare(b.name))
})
// Set random value once, not on every render
const greetings = ['Hello', 'Hi', 'Hey']
const greeting = ref(greetings[Math.floor(Math.random() * greetings.length)])
</script>Pure Function Guidelines
A pure function:
- Given the same inputs, always returns the same output
- Does not modify any external state
- Does not perform I/O operations (network, console, file system)
- Does not depend on mutable external state
// PURE - safe for templates
function formatCurrency(amount, currency = 'USD') {
return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
}
function fullName(first, last) {
return `${first} ${last}`
}
function isExpired(date) {
return new Date(date) < new Date()
}
// IMPURE - unsafe for templates
function logAndReturn(value) {
console.log(value) // I/O
return value
}
function getFromLocalStorage(key) {
return localStorage.getItem(key) // External state
}
function updateAndReturn(obj, key, value) {
obj[key] = value // Mutation
return obj
}