Given an AgGridReact component like the following:
<AgGridReact rowData={myData}>
<AgGridColumn field="status" cellRenderer={() => <span />} />
</AgGridReact>
When I pass a different value to the myData prop, I get the following 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, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace.
The problem does not occur if the cellRenderer is replaced with () => 'foo'.
I am not calling any grid API methods. From the stack trace, the offending API call is internal (invoked because rowData changed).
The rowData prop is from the Redux store. It's changing as a result of an action dispatched from a saga. This may or may not be relevant.
Using cellRendererFramework fixed the problem. Something like:
class MyComponent extends React.Component {
render() { return <span />; }
}
<AgGridColumn field="status" cellRendererFramework={MyComponent} />
It's a bit inconvenient, but it works.