tomivirkki
commented
4 months ago Closed sagarbendale closed 1 week ago
tomivirkki
commented
4 months ago 
vursen
commented
2 weeks ago It was not easy to reproduce this issue. While it's indeed tied with synchronous rendering as Tomi suggested, it's also related to the <Select> component. This component calls requestContentUpdate within useEffect:
With synchronous rendering, this effect runs every time grid re-renders any renderer, which sometimes (not in all grid configurations) leads to React interpreting it as a possible infinite loop:
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.Simply wrapping renderers in flushSync doesn't guarantee that the DOM will be updated synchronously. React may still defer it to a micro task if flushSync was called while rendering was already in progress, which is explained in the warning that is currently suppressed:
Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
When there are many deferred sync renderers (GridColumn) that in turn trigger some async renderers (Select), it can create race conditions that React misinterprets as a possible infinite loop:
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.
Since synchronous rendering isn't guaranteed, it pretty much defeats the purpose of using flushSync in renderers. I think we should rather try to improve web components to support async renderers.
I see this error on AutoGrid. Whenever I have
columnRenderingset tolazyI see this error. If I change it back toeagerthis error will go away.