Avoid Unnecessary Re-renders in Vue with `v-memo`

DEV Community

John' }, { id: 2, name: 'Alice' } ]) const counter = ref(0) </script> <template> <button @click="counter++"> {{ counter }} </button> <div v-for="user in users" :key="user.id" > {{ user.name }} </div> </template>

Every counter update re-renders the whole list even though users never changed.

With v-memo we can:

<script setup lang="ts">
const users = ref([
 { id: 1, name: 'John' },
 { id: 2, name: 'Alice' }
])
const counter = ref(0)
</script>
<template>
 <button @click="counter++">
 {{ counter }}
 </button>
 <div
 v-for="user in users"
 :key="user.id"
 v-memo="[user.id]"
 >
 {{ user.name }}
 </div>
</template>

And now counter updates still happen but unchanged list items are skipped. This becomes extremely valuable for large lists, dashboards, or tables.

🟢 When NOT to Use It

v-memo is not needed everywhere as Vue is already highly optimized.

Avoid using it for tiny components, static content, or premature optimization as overusing memoization can:

reduce readability
make debugging harder
introduce stale UI bugs

🧪 Best Practices

Use v-memo only for measurable bottlenecks
Great for large dynamic lists
Keep dependency arrays minimal
Avoid premature optimization
Profile performance before optimizing
Combine with virtual scrolling for huge datasets
Prefer stable keys and predictable state updates

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

Vue School Link

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

🧪 Advance skills

A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you're advancing your career or switching paths, it's a smart step toward success.

Check out Certificates.dev by clicking this link or by clicking the image below:

Certificates.dev Link

Invest in yourself—get certified in Vue.js, JavaScript, Nuxt, Angular, React, and more!

✅ Summary

Memoization is a powerful optimization technique that helps avoid unnecessary work.

In this article, you learned:

What memoization is
What problem it solves
How Vue’s v-memo works
Practical examples for lists and components
When to use it — and when not to

Take care!
And happy coding as always 🖥️