hooks change in m-table's parent component causes pageSize reset when props has function properties and data is remote

[mdpx]

reproducible example here

when using axios-hooks, only happens when using custom column renderer,
when using the original axios, works fine even with custom renderer.

I assume this has nothing to do with axios-hooks as it works when not using custom renderer.

To Reproduce
Steps to reproduce the behavior:

1. click on the pageSize menu
2. click on "5" or "20"
3. wait till remote data returns
4. See error: the menu display not updated with selected pageSize
5. comment the render function from line 23
6. repeat step 1~3, no error this time

Expected behavior
the pageSize menu should update when user select another pageSize, no matter using custom column renderer or not.

Desktop

• OS: windows
• Browser: chrome
• Version: 89

[oze4]

Completely agree! Thanks for pointing this out. We would love to an accept a PR for this!! Otherwise, we will get to it when we can.

Thanks again.

[Domino987]

This seems like a weird bug. I will take a look at it. Thanks :)

[mdpx]

Hi! digged deeper and located the problem together with some related issues, but no idea what to do, need your decisions.

I think the real title of this issue should be "hooks change in m-table's parent component causes pageSize reset when props has function properties and data is remote".
I've updated the sandbox, you can see raw axios won't work either if the useState hook change happens.

in this case, calling the refetch function returned by useAxios triggers a hook change in parent component, causing a rerender in m-table, where new props is a deep clone of previous one, and the new column render function !== the previous one (I don't know how react implements this, as I know lodash's cloneDeep only copies reference for functions).

then propsChanged is true in componentDidUpdate, setDataManagerFields is called:

core/src/material-table.js

Lines 137 to 151 in 0e95344

	const fixedPrevColumns = this.cleanColumns(prevProps.columns);
	const fixedPropsColumns = this.cleanColumns(this.props.columns);
	let propsChanged = !equal(fixedPrevColumns, fixedPropsColumns);
	propsChanged =
	propsChanged || !equal(prevProps.options, this.props.options);
	if (!this.isRemoteData()) {
	propsChanged = propsChanged || !equal(prevProps.data, this.props.data);
	}
	if (propsChanged) {
	const props = this.getProps(this.props);
	this.setDataManagerFields(props);
	this.setState(this.dataManager.getRenderState());
	}

and because this.isRemoteData(), pageSize is reset to initial option:

core/src/material-table.js

Lines 119 to 120 in 0e95344

	(isInit || this.isRemoteData()) &&
	this.dataManager.changePageSize(props.options.pageSize);

@Domino987 you mentioned this line in mbrn # 1941, I agree with you that removethis.isRemoteData() condition. I see no reason for this as the only timing to set pageSize from options is when initializing. I've tried several examples with this removal and everything works fine.

in another similar mbrn # 1644 the opener suggests using && instead of ||, which I don't understand, related pr is closed by mbrn.

further, I think it would be better if propsChanged remains false in this case, but no clue how this can be achieved.

[mdpx]

@oze4 @Domino987 any thoughts on this?

[Domino987]

Hi. Can you create a PR with the update you made by removing the remote data and i will check of that works?