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;
}

5.1 KiB Raw Blame History

Template Functions Must Be Pure Without Side Effects

Task Checklist

Pure Function Guidelines

Reference

5.1 KiB

Raw Blame History