I have an AGGrid in my React application and have wired up the onSelectionChanged event to a handler.

I need to call gridApi.selectAll() in this function and avoid it being called recursively (we are adding custom disabled rows functionality, and I’m using this to sort out the state of the header selectAll checkbox).

I’ve tried setting a state variable, but that is an asyncronous function, so React doesn’t get chance to set it before it gets stuck in a infinite loop.

AGGrid:

<AgGridReact
  rowData={rowData}
  columnDefs={newColDefs}
  onSelectionChanged={handleSelectionChanged}
/>

Code, not working, results in infinite recursion:

const [isProgrammaticSelectionChange, setIsProgrammaticSelectionChange] = useState(false);

  const selectAll = (val: boolean) => {
    setIsProgrammaticSelectionChange(true);
    
    val ? gridApi.selectAll() : gridApi.deselectAll();
    
    setIsProgrammaticSelectionChange(true);
  }

  const handleSelectionChanged = () => {
    if (isProgrammaticSelectionChange) {
      return;
    }

    if (gridApi) {
      var selectedData = gridApi.getSelectedNodes().map((node: any) => node.data);

      // Disabled rows functionality hidden....

      // Check selectedData against the disabledRows to set the select all checkbox correctly
      if (disabledRows && disabledRows.length > 0) {

        if (selectedData.length === 0) {
          selectAll(false);
        } else {
          const totalRowCount = gridApi.getDisplayedRowCount();

          if (totalRowCount - disabledRows.length === selectedData.length){
            selectAll(true);
          }
        }

      }
    }
  };

Claude.AI suggested using a debounce function, but that seems really hacky.

How can I stop this happening?