VirtualTable crashes with the "Maximum update depth exceeded" error

[mlanzi]

Package versions:
devexteme version: 20.1.6 (from yarn)
devextreme-react version: 20.1.6 (from yarn)

Current behavior:
Sometimes (not every time), refreshing a few times the page with a VirtualTable I get the same error described in this topic:
#2656

I think it's necessary to update this package with the same fix of the "devextreme-reactive". Thanks.

Expected behavior:
It shouldn't crash.

console log:

react-dom.development.js:23093 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at checkForNestedUpdates (react-dom.development.js:23093)
at scheduleUpdateOnFiber (react-dom.development.js:21164)
at Object.enqueueSetState (react-dom.development.js:12639)
at VirtualTableLayout.Component.setState (react.development.js:471)
at VirtualTableLayout.storeRowHeights (dx-react-grid.es.js:3667)
at VirtualTableLayout.componentDidUpdate (dx-react-grid.es.js:3612)
at commitLifeCycles (react-dom.development.js:19835)
at commitLayoutEffects (react-dom.development.js:22803)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
checkForNestedUpdates @ react-dom.development.js:23093
scheduleUpdateOnFiber @ react-dom.development.js:21164
enqueueSetState @ react-dom.development.js:12639
Component.setState @ react.development.js:471
VirtualTableLayout.storeRowHeights @ dx-react-grid.es.js:3667
VirtualTableLayout.componentDidUpdate @ dx-react-grid.es.js:3612
commitLifeCycles @ react-dom.development.js:19835
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
enqueueSetState @ react-dom.development.js:12639
Component.setState @ react.development.js:471
_callee2$ @ UserList.js:263
tryCatch @ runtime.js:65
invoke @ runtime.js:303
prototype. @ runtime.js:117
step @ UserList.js:98
eval @ UserList.js:105
Promise.then (async)
step @ UserList.js:104
eval @ UserList.js:110
eval @ UserList.js:95
loadUtenti @ UserList.js:275
loadUtenti @ createPrototypeProxy.js:44
componentDidMount @ UserList.js:205
proxiedComponentDidMount @ createPrototypeProxy.js:66
commitLifeCycles @ react-dom.development.js:19814
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
enqueueSetState @ react-dom.development.js:12639
Component.setState @ react.development.js:471
_callee$ @ asyncComponent.js:129
tryCatch @ runtime.js:65
invoke @ runtime.js:303
prototype. @ runtime.js:117
step @ asyncComponent.js:46
eval @ asyncComponent.js:53
Promise.then (async)
step @ asyncComponent.js:52
eval @ asyncComponent.js:58
eval @ asyncComponent.js:43
componentDidMount @ asyncComponent.js:143
commitLifeCycles @ react-dom.development.js:19814
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Show 32 more frames
14:34:55.342 react-dom.development.js:19527 The above error occurred in the component:
in VirtualTableLayout (created by TableLayoutBase)
in TableLayoutBase (created by VirtualTableLayout)
in VirtualTableLayout (created by RenderComponent)
in RenderComponent (created by TemplatePlaceholderBase)
in TemplatePlaceholderBase (created by Context.Consumer)
in Unknown (created by Context.Consumer)
in Unknown (created by TemplateConnectorBase)
in TemplateConnectorBase (created by TemplatePlaceholderBase)
in TemplatePlaceholderBase (created by Context.Consumer)
in Unknown (created by Context.Consumer)
in Unknown (created by TemplateConnectorBase)
in TemplateConnectorBase (created by TableBase)
in TemplatePlaceholderBase (created by Context.Consumer)
in Unknown (created by Context.Consumer)
in Unknown (created by TableBase)
in TemplatePlaceholderBase (created by Context.Consumer)
in Unknown (created by Context.Consumer)
in Unknown (created by GridCore)
in div (created by RootBase)
in RootBase (created by WithStyles(RootBase))
in WithStyles(RootBase) (created by GridCore)
in TemplatePlaceholderBase (created by Context.Consumer)
in Unknown (created by Context.Consumer)
in Unknown (created by PluginHostBase)
in PluginHostBase (created by GridBase)
in GridBase (created by Grid)
in Grid (created by UserList)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by UserList)
in div (created by UserList)
in div (created by UserList)
in UserList (created by Connect(UserList))
in Connect(UserList) (created by UserListIndex)
in div (created by CardBox)
in div (created by CardBox)
in div (created by CardBox)
in CardBox (created by UserListIndex)
in div (created by UserListIndex)
in UserListIndex
in ReactPlaceholder (created by AsyncFunc)
in AsyncFunc (created by Route)
in Route (created by AdminIndex)
in Switch (created by AdminIndex)
in div (created by AdminIndex)
in AdminIndex (created by Route)
in Route (created by App)
in Switch (created by App)
in div (created by App)
in main (created by App)
in div (created by App)
in div (created by App)
in App (created by Connect(App))
in Connect(App) (created by Route)
in Route (created by withRouter(Connect(App)))
in withRouter(Connect(App)) (created by Route)
in Route (created by RestrictedRoute)
in RestrictedRoute (created by App)
in Switch (created by App)
in div (created by App)
in IntlProvider (created by App)
in App (created by Connect(App))
in Connect(App) (created by Route)
in Route (created by MainApp)
in Switch (created by MainApp)
in Router (created by ConnectedRouter)
in ConnectedRouter (created by MainApp)
in Provider (created by MainApp)
in MainApp

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
update.callback @ react-dom.development.js:20708
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19883
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
enqueueSetState @ react-dom.development.js:12639
Component.setState @ react.development.js:471
_callee2$ @ UserList.js:263
tryCatch @ runtime.js:65
invoke @ runtime.js:303
prototype. @ runtime.js:117
step @ UserList.js:98
eval @ UserList.js:105
Promise.then (async)
step @ UserList.js:104
eval @ UserList.js:110
eval @ UserList.js:95
loadUtenti @ UserList.js:275
loadUtenti @ createPrototypeProxy.js:44
componentDidMount @ UserList.js:205
proxiedComponentDidMount @ createPrototypeProxy.js:66
commitLifeCycles @ react-dom.development.js:19814
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
enqueueSetState @ react-dom.development.js:12639
Component.setState @ react.development.js:471
_callee$ @ asyncComponent.js:129
tryCatch @ runtime.js:65
invoke @ runtime.js:303
prototype. @ runtime.js:117
step @ asyncComponent.js:46
eval @ asyncComponent.js:53
Promise.then (async)
step @ asyncComponent.js:52
eval @ asyncComponent.js:58
eval @ asyncComponent.js:43
componentDidMount @ asyncComponent.js:143
commitLifeCycles @ react-dom.development.js:19814
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Show 32 more frames
14:34:55.359 UserList.js:100 Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at checkForNestedUpdates (react-dom.development.js:23093)
at scheduleUpdateOnFiber (react-dom.development.js:21164)
at Object.enqueueSetState (react-dom.development.js:12639)
at VirtualTableLayout.Component.setState (react.development.js:471)
at VirtualTableLayout.storeRowHeights (dx-react-grid.es.js:3667)
at VirtualTableLayout.componentDidUpdate (dx-react-grid.es.js:3612)
at commitLifeCycles (react-dom.development.js:19835)
at commitLayoutEffects (react-dom.development.js:22803)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)

[LazyLahtak]

Hi @mlanzi,

I cannot reproduce this issue. Could you please send us a runnable project that reproduces the issue (for example, using the CodeSandbox). Also, could you clarify the purpose of reloading a page multiple times?

[mlanzi]

When I said refreshing few times, I was only pointing out that the issue doesn't happen all the time, but trying to refresh the page two or more times could trigger the issue.
I can't provide a full example from my project, but I quoted the fix "#2656" because it seems you already encountered this issue in another package and already resolved it. I think you only need to apply the fix to this package too. Thanks.

[LazyLahtak]

The fix for #2656 is already available in v2.4.1. Please make sure that you use the last version of our product.

If the issue is reproduced in the current version, this may be related to components' customization in your project. Could you please create a minimal example using the CodeSandbox, fork it, and send it to us? It will help us research the issue and find its cause much faster.

[mlanzi]

I think we aren't understanding each other. As described I refer to the following packages:

devexteme version: 20.1.6 (from yarn)
devextreme-react version: 20.1.6 (from yarn)

Anyway I don't see anywhere the fix for #2656 in the page you linked (https://github.com/DevExpress/devextreme-reactive/blob/master/CHANGELOG.md)

[LazyLahtak]

Thank you for the clarification. The fix for #2656 is #2662 (you may have seen it in Linked pull requests).
Devextreme React and Devextreme Reactive are different products with different code. For this reason, our fix isn't applicable to the Devextreme React Grid. If you're using the Devextreme Reactive Grid, please send us an example where the error is reproduced. This will help us find and solve the issue.
If you can't reproduce the error, please contact our Support Center.

[no-response]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.