Why do I get unstable_flushDiscreteUpdates in AgGridReact [latest]

[simkessy]

Why do I get this error when my grid updates?

backend.js:6 Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
    in AgGridReact
    in div

[AhmedAGadir]

Hi,

ag-grid staff does not provide support through github. If you are a customer please contact us through our official support channel. Note that this issue has been flagged as managed-by-the-community, we also recommend you to check stackoverflow, note that if there is no activity on this issue after a while we will close it.

Thanks

[jackdh]

I've also recently been getting this.

[simkessy]

Don't worry, i'm sure we'll get a useful response from the devs soon.

[jackdh]

@AhmedAGadir I think we'd like to register this as a bug not as a support request. Please change the tag.

[rahulsivalenka]

Same is the case with me. When I edit a cell using a custom react cell editor component I am getting the same error. Here's codesandbox for the same.

https://codesandbox.io/s/ag-grid-formik-fieldarray-integration-cjcie

[jackdh]

@AhmedAGadir any response?

[stephtea]

It seems like it's something to do with aggrid doing direct dom manipulation by the cell being edited outside of react lifecycle. I imagine they are keeping the edit changes inside pure javascript and if you do anything that triggers a rerender, like setting state, it fails.

[seanlandsman]

@stephtea @jackdh @simkessy

I'll take a look at this - @rahul-sivalenka your repo will be useful in determining the issue here

[MyCupOfTeaOo]

Same is the case with me.

[seanlandsman]

I'll be taking a look at this issue this week

[seanlandsman]

I'm looking at this issue now - does this warning cause actual issues in your application(s)? From the repo provided it doesn't appear to actually impact the normal working operation of it.

I'm not suggesting this isn't something that needs to be fixed but rather am trying to determine the seriousness of it.

thanks

[jackdh]

Hi @seanlandsman

I've not actually seen any issues no

[simkessy]

Same

[mainfraame]

I see it when I call a context method that updates the grid's rowData.

[stratospark]

@mentierd I see the same issue with context menu altering rowData. Any workarounds?

[Dbuggerx]

@AhmedAGadir, as you can see, this is happening for multiple devs, and it's clearly a bug. Maybe it doesn't affect the usage of AgGrid right now, but could be very problematic in a new React version. Could you please change it to a bug ?

[hinsenchan]

Hopefully this is helpful in case the deltaRowDataMode prop was missed. It was not obvious to me on my first implementation.

I got the Warning: unstable_flushDiscreteUpdates when I used Redux to supply data to the rowData prop. It was resolved by setting deltaRowDataMode={true} and getRowNodeId={(data) => data.id} as instructed in the documentation. It allows Ag-Grid to work with immutable data stores. Not sure if this is the same root cause that you guys are experiencing?

https://www.ag-grid.com/javascript-grid-data-update/#delta-row-data

[seanlandsman]

@Dbuggerx this is being treated as bug and can be found on our pipeline under AG-4049 here: https://www.ag-grid.com/ag-grid-pipeline/

This is being looked at and I'll update this thread as soon as I have something to report. It is not being ignored!

[Dbuggerx]

Hey @seanlandsman, thanks for the reply!

[matgargano]

@seanlandsman I am seeing this issue when updating the state that controls my grid data after the rowDragEnd event. Does this sound like it's related to AG-4049

The error I receive is

index.js:1 Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
    in AgGridReact

Thanks for any help.

[seanlandsman]

@matgargano yes it does - if you have a repo I can use for this that would help too. The more I have the better to solve this

thanks

[makinggoodsoftware]

Hi,

Your ticket has been flagged as in_zendesk, it means that we recognize this as an issue worth investigating so we have moved it to our official support channel for customers (zendesk)

We will carry on there with the investigation and we will update you as soon as possible.

Thanks

[davis4acca]

Hi,

Thank you for your email. We are aware of this issue and have a feature request in our backlog:

You can follow the status of feature requests, bugs, and releases using our pipeline:
https://www.ag-grid.com/ag-grid-pipeline/

If you are an ag-Grid Enterprise Customer, please raise this in our Zendesk support system - contact info@ag-grid.com for access. This is our primary channel for Support.

This is the reference and summary of the relevant issue:

AG-4049 | [React] ag-react-grid unable to update state after cell edit (Warning: unstable_flushDiscreteUpdates)

[flocbit]

In my case this issue appears in console when editing pinned top row cells...

[seanlandsman]

@flocbit do you have a repo of this?

[flocbit]

I'm afraid I can't share my clients repo with you. I could send you some code samples though...?

[seanlandsman]

It doesn't have to be the full code - just something I can use to repro the issue and test any possible fix against - thanks!

[simkessy]

There's already a repo example in this thread. So was that issue ever addressed, because if it wasn't another repo doesn't give you anything additional.

[gerrod]

@seanlandsman here's a simple repro for you -

https://stackblitz.com/edit/react-tqf7fg?file=index.js

Just check/uncheck any of the checkboxes in any row and you'll see the problem appear in the console. I've tried this in Chrome and Edge (Chromium) and the warning appears for both of those - interestingly though it doesn't appear in Firefox.

Might be pushing my luck here, haha, but while you're there - try clicking any checkbox on and off really quickly on a single row, and you'll see all the checkboxes that are rendered by the functional component (F/T (FC) column) flickering while they're repainting. I've noticed this quite a lot with the grid - but if you use a class based component (F/T (Class) column) this doesn't happen... why is this?

[seanlandsman]

@gerrod thanks - this is helpful

The occasional flicker you see is on my radar too - I'm hoping to rework most of this area which is why this is taking longer than I'd originally hoped to resolve

[seanlandsman]

@simkessy I find multiple repos can occasionally be useful. If you don't theb that's fine too.

[mainfraame]

@stratospark I ended up converting to use react context instead. I did notice that when upgrading to 21.1.2, that error seemed to go away.

Surprised they didn't close this yet. They usually feed you that BS line about this not being the correct spot to report a bug and then immediately close it.

[tolgaduzenli]

api.redrawRows() can help you. basically grid api should take care of re-render operation when you need to refresh the data.
Explanation in here

[Gofive]

@simkessy I find multiple repos can occasionally be useful. If you don't theb that's fine too.
@seanlandsman The issue will be fixed in the latest release v23.2.0 (5th Jun 2020)?

[yumindeckard]

Hi, any news about this bug ? @davis4acca

[ianbale]

I've only been using ag_grid today, but already run into this error message. I am using v 23.2.0

I am loading data into my grid incrementally.

If i have clicked on any row in the grid (so given it focus) then this error is thrown when the rowData is updated.

If I either do not click on a row, or click outside of the grid, or on any part of the grid that is not a row, afterwards to remove focus, then the error is not thrown when rowData is updated.

I'm using applyTransactionAsync now. The error is not thrown when using this rather than updating rowData.

[JenRob17]

This is closed, however, we are Enterprise customers and still seeing this problem. Was there a resolution? @seanlandsman

[natejcho]

This is closed, however, we are Enterprise customers and still seeing this problem. Was there a resolution? @seanlandsman

They closed it bc the issue is being tracked in their enterprise pipeline.
https://www.ag-grid.com/ag-grid-pipeline/

search for ag-4049 and you'll see it's in the backlog currently

[mainfraame]

@natejcho you guys should prioritize it; it's been an issue since 2018 for me

[CharlesMulic]

Also running in to this as an enterprise customer. +1 for prioritization.

[asherrna]

I have this issue when updating rowData directly, but not when updating rowData via the api.

[ed-workbase]

Adding another voice of an enterprise customer who is getting this.
Added frustration I seem to lose the filter mobile when this happens

[etyp]

Another Enterprise customer running into this issue here.

It's badly affecting our users as the custom editor dropdown appears and them immediately disappears, causing massive user frustration. We don't have a workaround and are completely stuck on how to patch this without changes from ag-Grid.

[cesarvargas00]

If you are using react with Redux, try checking this part of the documentation.
This helped me a lot and now it is working perfectly ❤️

Also, do not forget to especify an id as explained in the article above, or data will not show up.

[alaarab]

Getting this even with immutableData={true} and getRowNodeId={(data) => data._id}

[maxLatoche]

enterprise customer here also dealing with this problem.

It manifests any time I try to update columnDefs in a React component.

I am using immutableData={true} and and getRowNodeId={(data) => data._id}. Everything works great until I try and add custom updates to columns.

I've tried using declarative column definitions and I've tried binding columnDefs. When an event handler triggers an update to columnDefs in my application state, the new values are passed to the AgGridReact component, but updates don't propagate and unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering is thrown. Subsequent rerenders (like after I update some rowData) propagate the columnDef changes to the DOM. My understanding of the declarative API from the documentation linked is that both of these approaches are valid.

Are declarative updates to columnDefs supported in React at the moment? Everything I can find in the docs only shows static data passed as columnDefs. Digging into the source code further, it looks like columns are completely destroyed and recreated outside of the virtual DOM on each update. This seems to be a fundamental problem without a workaround short of a fix of issue ag-4049.

Edit: turns out simply re-rendering the component doesn't correctly update columnDefs like I said before. I have to scroll until it's not on the page and then scroll back to the column, which removes the DOM node and then reinserts it.

[maxLatoche]

I've recreated the problem of dynamically updating columnDefs here.

1. Click on the 'toggle text wrap' button, which updates a flag in local state. Text wrapping does not update in the DOM.
2. scroll to the right until the column is out of view, and has been removed from the DOM
3. scroll back to the left until the column is in view again. Text wrapping is now in sync with the flag in local state.

[lauraalkhoury-varicent]

@seanlandsman any updates on this one? I don't see ag-4049 in the pipeline anymore

[seanlandsman]

@lauraalkhoury-varicent this has now been fixed - you can see it in our changelog here: https://www.ag-grid.com/ag-grid-changelog/?fixVersion=25.0.0

[readikus]

I am still experiencing this issue with 25.0.1

[galleyrob]

Enterprise customer, version 26.2.0 and still getting this problem

[readikus]

I'm so glad I no longer have to support this horrific library.

[wallace-sf]

api.redrawRows() can help you. basically grid api should take care of re-render operation when you need to refresh the data. Explanation in here

Redrawrows before update the state of rowData worked for me. Thank you dude!