Autogrid <vaadin-grid> needs the total number of items and Maximum update depth exceeded

I am using AutoGrid with ListService implemented as EndPoint in backend.

Initially after debugging, implemented CountService as well along with ListService. After that i see count call is also happening, but I still see this in console.

Any Idea how to get rid of these? everything seems to work fine on UI, but i am concerned about these warning.

The needs the total number of items in order to display rows, which you can specify either by setting the size property, or by providing it to the second argument of the dataProvider function callback call.

Also i see this error on AutoGrid, I suspect when I open one screen with grid and then navigate to other, this error shows up. But screen works fine.

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render.

console.error @ list:5
r9.error @ useRenderer.ts:60
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
checkForNestedUpdates @ react-dom.development.js:27339
scheduleUpdateOnFiber @ react-dom.development.js:25514
dispatchReducerAction @ react-dom.development.js:16633
(anonymous) @ useRenderer.ts:62
flushSync @ react-dom.development.js:26228
flushSync$1 @ react-dom.development.js:29878
(anonymous) @ useRenderer.ts:62
_runRenderer @ vaadin-grid-column-mixin.js:612
(anonymous) @ vaadin-grid-column-mixin.js:643
__renderCellsContent @ vaadin-grid-column-mixin.js:626
_renderBodyCellsContent @ vaadin-grid-column-mixin.js:709
_onRendererOrBindingChanged @ vaadin-grid-column-mixin.js:714
runMethodEffect @ property-effects.js:1038
runEffects @ property-effects.js:140
_propertiesChanged @ property-effects.js:1922
_flushProperties @ properties-changed.js:384
_invalidateProperties @ property-effects.js:1748
Object.defineProperty.set @ properties-changed.js:170
(anonymous) @ vaadin-grid-mixin.js:547
_createScrollerRows @ vaadin-grid-mixin.js:545
_createPool @ virtualizer-iron-list-adapter.js:408
_increasePoolIfNeeded @ iron-list-core.js:434
_increasePoolIfNeeded @ virtualizer-iron-list-adapter.js:724
flush @ debounce.js:124
(anonymous) @ debounce.js:159
flushDebouncers @ debounce.js:157
flush @ debounce.js:172
set size @ virtualizer-iron-list-adapter.js:355
set size @ virtualizer.js:49
_flatSizeChanged @ vaadin-grid-mixin.js:300
runMethodEffect @ property-effects.js:1038
runEffects @ property-effects.js:140
_propertiesChanged @ property-effects.js:1922
_flushProperties @ properties-changed.js:384
_invalidateProperties @ property-effects.js:1748
Object.defineProperty.set @ properties-changed.js:170
_onDataProviderPageReceived @ vaadin-grid-data-provider-mixin.js:348
_onDataProviderPageReceived @ vaadin-grid-array-da…rovider-mixin.js:45
callback @ data-provider-controller.js:254
load @ data-provider.ts:91
await in load (async)
__loadCachePage @ data-provider-controller.js:265
loadFirstPage @ data-provider-controller.js:215
_ensureFirstPageLoaded @ vaadin-grid-data-provider-mixin.js:440
_dataProviderChanged @ vaadin-grid-data-provider-mixin.js:426
runObserverEffect @ property-effects.js:231
runEffects @ property-effects.js:140
_propertiesChanged @ property-effects.js:1922
_flushProperties @ properties-changed.js:384
_invalidateProperties @ property-effects.js:1748
Object.defineProperty.set @ properties-changed.js:170
(anonymous) @ autogrid.tsx:412
setTimeout (async)
(anonymous) @ autogrid.tsx:395
commitHookEffectListMount @ react-dom.development.js:23189
commitPassiveMountOnFiber @ react-dom.development.js:24965
commitPassiveMountEffects_complete @ react-dom.development.js:24930
commitPassiveMountEffects_begin @ react-dom.development.js:24917
commitPassiveMountEffects @ react-dom.development.js:24905
flushPassiveEffectsImpl @ react-dom.development.js:27078
flushPassiveEffects @ react-dom.development.js:27023
performSyncWorkOnRoot @ react-dom.development.js:26115
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26240
flushSync$1 @ react-dom.development.js:29878
(anonymous) @ useRenderer.ts:62
_runRenderer @ vaadin-grid-column-mixin.js:612
(anonymous) @ vaadin-grid-column-mixin.js:643
__renderCellsContent @ vaadin-grid-column-mixin.js:626
_renderHeaderCellContent @ vaadin-grid-column-mixin.js:672
_onHeaderRendererOrBindingChanged @ vaadin-grid-column-mixin.js:680
runMethodEffect @ property-effects.js:1038
runEffects @ property-effects.js:140
_propertiesChanged @ property-effects.js:1922
_flushProperties @ properties-changed.js:384
_invalidateProperties @ property-effects.js:1748
Object.defineProperty.set @ properties-changed.js:170
(anonymous) @ vaadin-grid-mixin.js:735
_updateRow @ vaadin-grid-mixin.js:669
(anonymous) @ vaadin-grid-mixin.js:900
iterateChildren @ vaadin-grid-helpers.js:26
_renderColumnTree @ vaadin-grid-mixin.js:899
_columnTreeChanged @ vaadin-grid-mixin.js:842
runMethodEffect @ property-effects.js:1038
runEffects @ property-effects.js:140
_propertiesChanged @ property-effects.js:1922
_flushProperties @ properties-changed.js:384
_invalidateProperties @ property-effects.js:1748
Object.defineProperty.set @ properties-changed.js:170
_updateColumnTree @ vaadin-grid-dynamic-columns-mixin.js:112
(anonymous) @ vaadin-grid-dynamic-columns-mixin.js:94
(anonymous) @ debounce.js:84
microtaskFlush @ async.js:35
(anonymous) @ async.js:179

Update -

Maximum update error shows up when I have columnRendering set to lazy
If I make it eager, this does not show up.

This could be filed as an issue to GitHub - vaadin/react-components

The issue is most likely caused by fix: add a config option to render synchronously by tomivirkki · Pull Request #196 · vaadin/react-components · GitHub

We’ll need to consider reverting the fix. However, that will require some changes to grid/grid-pro web components as some of their functionality relies on synchronous rendering

I have submitted an issue to github - Maximum update depth exceeded with AutoGrid columnRendering set to lazy · Issue #250 · vaadin/react-components (github.com)