javascript - React setState not updating state in AG Grid onCellValueChanged callback

Question

I am using Ag Grid in my React.js project. I want to increase the count value if the cell value changes. I am passing my handleChange function to onCellValueChanged callBack. Every time cell value changes it triggers my handleChange function, but the issue is count value is always 0 regardless updating it through setState(count + 1). Can anyone help with this?

I have posted an example on StackBlitz to reproduce this issue :
https://stackblitz.com/edit/ag-grid-react-hello-world-zmsvf5?embed=1&file=index.js

question from:https://stackoverflow.com/questions/65941107/react-setstate-not-updating-state-in-ag-grid-oncellvaluechanged-callback

Answer 1

Your problem is to execute de loading function without useEffect. It causes too many re-renders because in each setRowData, the component render again.

This is the solution:

    function loadDataFromServer() {
    setTimeout(() => {
      setRowData([{ make: "Toyota" }, { make: "Toyota" }, { make: "Toyota" }]);
    }, 1000);
  }

  useEffect(() => {
    setCount(prevCount => prevCount + 1);
  }, [rowData]);

  useEffect(() => {
    loadDataFromServer();
  }, []);

  // function handleChange() {
  //   //here Count will always remain 0 (the value provided initially)
  //   console.log("Count => ", count);
  //   setCount(count + 1);
  // }

  return (
    <div>
      <h1>Count Changes: {count}</h1>
      <div className="ag-theme-alpine" style={{ height: 400 }}>
        <AgGridReact rowData={rowData}>
          <AgGridColumn
            field="make"
            editable={true}
            // onCellValueChanged={handleChange}
          />
        </AgGridReact>
      </div>
    </div>
  );
};