Crash while scrolling the grid

[MatteoBuffo]

I'm submitting a ... (check one with "x")

[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[] support request => see 'Requesting Community Support'

Requesting Community Support

Hi. My goal is to have a very simple, one-column grid showing numeric data (e.g. age). Numeric values are changed their sign at random every second.

Providing a Reproducible Scenario Plunker

Current behavior Whenever I scroll the table while data is being updated, it may crash, with the console printing the following error:

Uncaught Error: AG Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, e.g. instead of api.redrawRows(), call setTimeout(function() { api.redrawRows(); }, 0). To see what part of your code that caused the refresh check this stacktrace.
    at RowRenderer.getLockOnRefresh (ag-grid-community.auto.esm.js:39440:1)
    at RowRenderer.redrawAfterModelUpdate (ag-grid-community.auto.esm.js:39384:1)
    at RowRenderer.onPageLoaded (ag-grid-community.auto.esm.js:39266:1)
    at ag-grid-community.auto.esm.js:1289:1
    at Set.forEach (<anonymous>)
    at processEventListeners (ag-grid-community.auto.esm.js:1280:1)
    at EventService.dispatchToListeners (ag-grid-community.auto.esm.js:1296:1)
    at EventService.dispatchEvent (ag-grid-community.auto.esm.js:1260:1)
    at PaginationProxy.onModelUpdated (ag-grid-community.auto.esm.js:40960:1)
    at ag-grid-community.auto.esm.js:1289:1

Actually, this crash never happens in the Plunker I'm providing, but it does in my project (whose code is the same of the Plunker). I tried to wrap the setRowData fragment around a setTimeout(() => {}, 0) as suggested by the error, but no luck. Also, reducing the setInterval interval (Plunker, line 51) increases the chances to cause the crash.

As a workaround, I passed animateRows={false} to the grid, but I would like to keep the animation on.

Expected behavior The crash should not happen.

Please tell us about your environment: Windows 10, React project (JS)

• AG Grid version: ^31.0.1 (ag-grid-react)

• Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

• Language: JS

[AG-Zoheil]

Hi @MatteoBuffo,

Thanks for raising this on GitHub.

I'm afraid it'll be very hard for us to investigate this without a reproducible example. Are you able to reproduce it in a "mini-project" of your code? If you can reproduce it and send us a zip of the most simplest version of your code that can reproduce it, we'd be happy to take a look.

Kind regards, Zoheil

[MatteoBuffo]

If you can reproduce it and send us a zip of the most simplest version of your code that can reproduce it, we'd be happy to take a look.

After creating a new React project and installing ag-grid I found out the reason is in the react and react-dom libraries versions (old: 17.0.2, new: 18.2.0). After upgrading, my broken project worked.

Thank you anyway!

[BSd3v]

Going to add to this, I found this issue with a project I was working on.

My version as v30.2, but I was having issues with changing the window size causing the app to crash. Narrowed it down to the height adjusting, and with animate rows turned off it works.

I cannot update the React version currently, so I will keep the workaround. 😄