VueJS component rerenders when props is unchanged - vue.js

Question

I have a list in the vuex store with tables[t1,t2], when t1 updates i have to mutate the tables array in order to have the t1 updates.
For each table i use a <Table v-for="(item, index) in tables" :key="index" :data="item"> where it uses a Table.vue. In Table.Vue i have:
props: {
data: {
type: Object,
default: null
}
},
But when t1 changes it also forces an update to t2, which is understandable because the whole "tables" variable in store gets mutated. But I only want the component to update when there is an actual change in props, so that the t2 doesn't get updated unnecessarily. I've tried to look into memoization, which i used previously in React-projects to fix this problem. I didn't really find anything easy to use and searching "memoization vuejs" didn't really give me alot to go on.
What i do in the mutation in vuex store in order to mutate a table:
my_mutation(state, data) {
let newList = [...state.tables];
let index = newList.findIndex(i => i.tableName === data.tableName);
if (index !== -1) {
newList[index] = data.value;
}
Vue.set(state, 'currentViews', newList);
}
as you can see this code only mutate 1 element at the time in the state.tables, but sets the whole tables variable. This causes the update() function to trigger in the components (notice not created() as this only happens initally when i fetch and populate the tables variable) and rerenders the component.
Since the created() is not triggered when the mutation happens, this tells me that the component is still there and doesn't need to be recreated. The goal here is not to trigger updated() when theres no changes to the props and prevent rerendering of that particular component.

Answer 1

You should probably add some code because what you say you see seems strange...
Look at the following example (updated example to use Vuex...just to be sure)
first button mutate the 1st table's data at index 0. Result = only 1st component re-renders
second button completely replaces data for 2nd table. Result = only 2nd component re-renders
3rd button replaces whole tables array by a new array. Result = both component's re-render (as expected)
4th button for curious people ;) ...completely new tables array composed from existing instances. Result = no re-render at all
5th button (added after Q update)
same way of updating as in question
Result - only 2nd table rerenders! Clear contradiction to what you say...
note that if you have currentViews property in the state from the beggining, you don't need to use Vue.set - simple assignment will suffice
Update: Added updated hook with console.log into mytable component to check if logs correlate with time changes in tables headers - confirmed
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
tables: [
['item 1', 'item 2'],
['item 1', 'item 2']
]
},
mutations: {
mutate1st(state) {
Vue.set(state.tables[0], 0, state.tables[0][0]+'+1')
},
mutateTables(state) {
Vue.set(state.tables, 1, ['item 3', 'item 4'])
},
replaceTables(state) {
state.tables = [
['item 1', 'item 2'],
['item 1', 'item 2']
]
},
newArrayCreatedFromPreviousOnes(state) {
state.tables = [...state.tables] // we are creating new array composed from existing instances
},
sameWayAsInQuestion(state) {
let newList = [...state.tables];
newList[1] = ['item 5', 'item 6'];
Vue.set(state, 'tables', newList);
}
}
})
const mytable = Vue.component('mytable', {
props: ['title', 'data'],
template: `
<div>
<div> {{ title }} ({{ now() }}) </div>
<div v-for="(item, index) in data" :key="index">{{ item }}</div>
<hr>
</div>
`,
methods: {
now() {
const date = new Date();
return date.toLocaleTimeString();
}
},
updated() {
console.log(`${this.title} updated at ${this.now()}`)
}
})
const app = new Vue({
store,
components: { mytable },
template: `
<div>
<button #click="mutate1st">Mutate 1st table data</button>
<button #click="mutateTables">Mutate tables array</button>
<button #click="replaceTables">Replace tables array</button>
<button #click="newArrayCreatedFromPreviousOnes">Just for curiosity...</button>
<button #click="sameWayAsInQuestion">Same way as in question</button>
<hr>
<mytable v-for="(table, index) in $store.state.tables" :key="index" :title="'Table ' + index" :data="table" />
</div>
`,
methods: {
...Vuex.mapMutations(['mutate1st', 'mutateTables', 'replaceTables', 'newArrayCreatedFromPreviousOnes', 'sameWayAsInQuestion'])
}
})
app.$mount("#app")
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<div id="app"></div>

Answer 2

Update: I have another component inside Table.vue which was dependent on a store variable which was mutated when changing t1 causing the rest of the tables to change. Tip of the day: check if all the nested component isnt dependent on some store variable effected by the change