Infinite Table updates?

[kikuomax]

Overview of the problem

Buefy version: [0.1.2]
Vuejs version: [3.3.7]
OS/Browser: macOS/test-utils

Description

Table caused infinite updates of reactive states.

[Vue warn]: Maximum recursive updates exceeded in component <BTable>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Steps to reproduce

1. Merge changes in the original buefy repo (Merge changes in buefy/buefy from b6233b9c335d99cf688ee2a3b9c61fd26a92a182 to v0.9.28 #159)
2. cd packages/buefy-next
3. npx jest src/components/table/TableColumn.spec.js

Expected behavior

No infinite updates.

Actual behavior

Infinite updates.

[kikuomax]

This might be caused by values bound to <b-slot-component>, which are return values of methods; i.e., a brand new object is created every time the method is called.

buefy-next/packages/buefy-next/src/components/table/Table.vue

Lines 318 to 332 in 185589f

	<b-slot-component
	:component="column"
	v-bind="column.tdAttrs(row, column)"
	scoped
	name="default"
	tag="td"
	:class="column.getRootClasses(row)"
	:style="column.getRootStyle(row)"
	:data-label="column.label"
	:props="{
	row, column, index, colindex,
	toggleDetails, isActiveDetailRow
	}"
	@click="$emit('cellclick',row,column,index,colindex)"
	/>

I found a case where the recursion error disappeared if I removed all of the v-bind, :class, and :style bindings.

[wesdevpro]

This might be caused by values bound to <b-slot-component>, which are return values of methods; i.e., a brand new object is created every time the method is called.

buefy-next/packages/buefy-next/src/components/table/Table.vue

Lines 318 to 332 in 185589f

	<b-slot-component
	:component="column"
	v-bind="column.tdAttrs(row, column)"
	scoped
	name="default"
	tag="td"
	:class="column.getRootClasses(row)"
	:style="column.getRootStyle(row)"
	:data-label="column.label"
	:props="{
	row, column, index, colindex,
	toggleDetails, isActiveDetailRow
	}"
	@click="$emit('cellclick',row,column,index,colindex)"
	/>

I found a case where the recursion error disappeared if I removed all of the v-bind, :class, and :style bindings.

As a result did the CPU usage go down to?

[kikuomax]

As a result did the CPU usage go down to?

@wesdevpro I was not able to measure the CPU usage because I just ran a tiny Vitest test case.

[wesdevpro]

As a result did the CPU usage go down to?

@wesdevpro I was not able to measure the CPU usage because I just ran a tiny Vitest test case.

That makes sense