1---
2title: Keep Props Stable to Minimize Child Re-renders
3impact: HIGH
4impactDescription: Passing changing props to list items causes ALL children to re-render unnecessarily
5type: efficiency
6tags: [vue3, performance, props, v-for, re-renders, optimization]
7---
8 
9# Keep Props Stable to Minimize Child Re-renders
10 
11**Impact: HIGH** - When props passed to child components change, Vue must re-render those components. Passing derived values like `activeId` to every list item causes all items to re-render when activeId changes, even if only one item's active state actually changed.
12 
13Move comparison logic to the parent and pass the boolean result instead. This is one of the most impactful update performance optimizations in Vue.
14 
15## Task Checklist
16 
17- [ ] Avoid passing parent-level state that all children compare against (like `activeId`)
18- [ ] Pre-compute derived boolean props in the parent (like `:active="item.id === activeId"`)
19- [ ] Profile re-renders using Vue DevTools to identify prop stability issues
20- [ ] Consider this pattern especially critical for large lists
21 
22**Incorrect:**
23```vue
24<template>
25  <!-- BAD: activeId changes -> ALL 100 ListItems re-render -->
26  <ListItem
27    v-for="item in list"
28    :key="item.id"
29    :id="item.id"
30    :active-id="activeId"
31  />
32</template>
33 
34<script setup>
35import { ref } from 'vue'
36 
37const list = ref([/* 100 items */])
38const activeId = ref(null)
39 
40// When activeId changes from 1 to 2:
41// - ListItem 1 needs to re-render (was active, now not)
42// - ListItem 2 needs to re-render (was not active, now active)
43// - All other 98 ListItems ALSO re-render because activeId prop changed!
44</script>
45```
46 
47```vue
48<!-- ListItem.vue - receives activeId and compares internally -->
49<template>
50  <div :class="{ active: id === activeId }">
51    {{ id }}
52  </div>
53</template>
54 
55<script setup>
56defineProps({
57  id: Number,
58  activeId: Number  // This prop changes for ALL items
59})
60</script>
61```
62 
63**Correct:**
64```vue
65<template>
66  <!-- GOOD: Only items whose :active actually changed will re-render -->
67  <ListItem
68    v-for="item in list"
69    :key="item.id"
70    :id="item.id"
71    :active="item.id === activeId"
72  />
73</template>
74 
75<script setup>
76import { ref } from 'vue'
77 
78const list = ref([/* 100 items */])
79const activeId = ref(null)
80 
81// When activeId changes from 1 to 2:
82// - ListItem 1: :active changed from true to false -> re-renders
83// - ListItem 2: :active changed from false to true -> re-renders
84// - All other 98 ListItems: :active is still false -> NO re-render!
85</script>
86```
87 
88```vue
89<!-- ListItem.vue - receives pre-computed boolean -->
90<template>
91  <div :class="{ active }">
92    {{ id }}
93  </div>
94</template>
95 
96<script setup>
97defineProps({
98  id: Number,
99  active: Boolean  // This only changes for items that truly changed
100})
101</script>
102```
103 
104## Common Patterns That Cause Prop Instability
105 
106```vue
107<!-- BAD: Passing index that could shift -->
108<Item
109  v-for="(item, index) in items"
110  :key="item.id"
111  :index="index"
112  :total="items.length"  <!-- Changes when list changes -->
113/>
114 
115<!-- BAD: Passing entire selection set -->
116<Item
117  v-for="item in items"
118  :key="item.id"
119  :selected-ids="selectedIds"  <!-- All items re-render on any selection -->
120/>
121 
122<!-- GOOD: Pre-compute the boolean -->
123<Item
124  v-for="item in items"
125  :key="item.id"
126  :selected="selectedIds.includes(item.id)"
127/>
128```
129 
130## Performance Impact Example
131 
132| Scenario | Props Changed | Components Re-rendered |
133|----------|---------------|------------------------|
134| 100 items, pass `activeId` | 100 | 100 (all) |
135| 100 items, pass `:active` boolean | 2 | 2 (only changed) |
136| 1000 items, pass `activeId` | 1000 | 1000 (all) |
137| 1000 items, pass `:active` boolean | 2 | 2 (only changed) |
138 
139## Reference
140- [Vue.js Performance - Props Stability](https://vuejs.org/guide/best-practices/performance.html#props-stability)
141