forceUpdate warning on Grid - reactjs

Question

I am getting the warning below when I force update on a grid like this:
proxyConsole.js:56 Warning: forceUpdate(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.
Not sure how to amend where to put forceUpdate() so that it behaves correctly.
const quoteList = [];
class App extends Component {
constructor() {
super();
this.state = {
response: {},
endpoint: "http://127.0.0.1:4001"
};
}
componentDidMount() {
const { endpoint } = this.state;
const socket = socketIOClient(endpoint);
this.theGrid.forceUpdate();
socket.on("FromAPI", data => this.setState({ response: data }));
}
cellRenderer ({ columnIndex, key, rowIndex, style }) {
return (
<div
key={key}
style={style}
>
{quoteList[rowIndex][columnIndex]}
</div>
)
}
render() {
const { response } = this.state;
if(Object.keys(response).length !== 0)
{
//console.log(response);
const row = symbolRowDictionary[response.ticker];
var column = 0;
switch(response.type)
{
case 'bid':
column = 1;
break;
case 'ask':
column = 3;
break;
case 'last':
column = 5;
break;
default:
console.log('Unknown type');
}
quoteList[row][column] = response.size;
quoteList[row][column + 1] = response.price;
this.theGrid.forceUpdate();
}
return (
<div style={{ textAlign: "center" }}>
{
<ul><li>Quote: {response.ticker} {response.type} {response.price} {response.size}</li></ul>
}
<div>
</div>
<Grid
ref={(ref) => this.theGrid = ref}
cellRenderer={this.cellRenderer}
columnCount={7}
columnWidth={75}
height={quoteList.length * 20}
rowCount={quoteList.length}
rowHeight={20}
width={800}
/>
</div>
);
}
}
export default App;

Answer 1

I would move quoteList to component state as following:
const endpoint: "http://127.0.0.1:4001";
class App extends Component {
constructor() {
super();
this.state = {
response: {},
quoteList = [];
};
}
componentDidMount() {
const socket = socketIOClient(endpoint);
let _this = this;
let {quoteList} = this.state;
socket.on("FromAPI", data => {
if(Object.keys(response).length !== 0) {
const row = symbolRowDictionary[response.ticker];
var column = 0;
switch(response.type)
{
case 'bid':
column = 1;
break;
case 'ask':
column = 3;
break;
case 'last':
column = 5;
break;
default:
console.log('Unknown type');
}
quoteList[row][column] = response.size;
quoteList[row][column + 1] = response.price;
_this.setState({ response: data, quoteList: quoteList })
}
}));
}
cellRenderer ({ columnIndex, key, rowIndex, style }) {
let {quoteList} = this.state;
return (
<div
key={key}
style={style}
>
{quoteList[rowIndex][columnIndex]}
</div>
)
}
render() {
const { response, quoteList } = this.state;
return (
<div style={{ textAlign: "center" }}>
{
<ul><li>Quote: {response.ticker} {response.type} {response.price} {response.size}</li></ul>
}
<div>
</div>
<Grid
ref={(ref) => this.theGrid = ref}
cellRenderer={this.cellRenderer}
columnCount={7}
columnWidth={75}
height={quoteList.length * 20}
rowCount={quoteList.length}
rowHeight={20}
width={800}
/>
</div>
);
}
}
export default App;
When quoteList is updated, its length will be updated accordingly and these changes will be passed to the child component Grid
EDIT
As you do not understand why does this code run, I will explan a little bit. If you don't know about React lifecycle, please take a look at this illustration
quoteList is initialized as an empty array in constructor
render is called the first time. cellRenderer will be bound to this component, or this point to App component.
After component is mounted, componentDidMount will be triggered. Here is when we should fetch data from API. Within the function block (data => {...}) , this is pointing to the function itself. So before fetching the API, I have to assign _this = this to be able to call setState.
setState is executed, render will be triggered again and since quoteList is changed. Your App will be rendered differently according to new quoteList. Means the new quoteList now is passed to your Grid. Grid also re-render.
With this flow, you don't need to forceUpdate.

Answer 2

After much experimentation and some online docs, I was able to solve it by putting this.theGrid.forceUpdate like this. There are no warnings, and render and rendercell are kept "pure"
componentDidMount() {
const socket = socketIOClient(endpoint);
socket.on("FromAPI", data =>
{
this.setState({ response: data });
this.theGrid.forceUpdate();
}
);
}