ag-grid 使用钩子做出反应会导致在某些环境中重新安装组件

Question

Long story short: on some environments using react useState hook causes ag grid to refresh itself. It's behaves like component was mounted again from scratch, so you'd lost scroll position etc. I am using infinte scroll mode, but same behaviour is present regardless of scroll type. In example below i am trying to use useState hook in order to update custom div in onViewportChanged callback:

function Grid({ columnDefinition, config }) {
const domInfoRef = useRef(null);

const [actualRange, setActualRange] = useState({ from: null, to: null, total: null });

  function onViewportChanged(data) {
     if (config.paginationStyle === 'scroll' && domInfoRef.current) {
        const renderedNodes = data.api.getRenderedNodes();
        const firstIndex = renderedNodes[0].rowIndex;
        const lastIndex = renderedNodes[renderedNodes.length - 1].rowIndex;
        /*
        React "useState" inside AG grid callbacks causes unstable behaviour and refresh of component
        on some environments.
        This not works: 
        setActualRange({from: firstIndex + 1, to: ${lastIndex + 1}, total: data.api.getDisplayedRowCount()})
        In order to update status there is necessary to do this using plain js as below.
        */
        // update page-info after scrolling in "scroll" pagination style
        domInfoRef.current.textContent = `${firstIndex + 1} - ${lastIndex + 1} of ${data.api.getDisplayedRowCount()}`;
      }
   }
return (
<Fragment>
    <div className={`page-info`}>
        <span ref={domInfoRef}>
            {actualRange.from} - {actualRange.to} of {actualRange.total}
        </span>
    </div>
    <AgGridReact
        pagination={false}
        paginationPageSize={config.itemsPerPage}
        cacheBlockSize={config.itemsPerPage}
        maxBlocksInCache={config.itemsPerPage}
        rowModelType={'serverSide'}
        rowData={gridData}
        onGridReady={onGridReady}
        serverSideDatasource={createDataSource()}
        serverSideStoreType={'partial'}
        rowSelection='single'
        onViewportChanged={onViewportChanged}
        blockLoadDebounceMillis={100}
    >
        {columnDefinition.map((column) => {
            return (
                <AgGridColumn
                    headerName={column.headerName}
                    field={column.field}
                    suppressMenu={true}
                    sortable={column.sortable}
                    key={column.field}
                    resizable={column.resizable}
                    onCellClicked={column.onCellClicked}
                    cellRenderer={renderers[column.field] ? column.field : null}
                    valueFormatter={column.valueFormatter ?? null}
                    suppressSizeToFit={column.suppressSizeToFit}
                ></AgGridColumn>
            );
        })}
    </AgGridReact>
</Fragment>;
}
);

Same story if I will use react inside cell renderers function (of course after registering that render in ag grid inside frameworkComponents). Rendering alone and all other functions from grid like sorting etc works fine. But I have no really clue what thing may cause this issue. AG grid version is 25.2.0, React version is 16.14.0. Thank you in advance for any clue. I've tried to use memo without any success. And the strangest thing is that is works on some environments fine and it is not depend on browser or OS.

Answer 1

Workaround: Wrap AGGrid inside useState hook:

    const [grid, setGrid] = useState(null);


    const agGrid = () =>{
    return(
     <AgGridReact
            pagination={false}
            paginationPageSize={config.itemsPerPage}
            cacheBlockSize={config.itemsPerPage}
            maxBlocksInCache={config.itemsPerPage}
            rowModelType={'serverSide'}
            rowData={gridData}
            onGridReady={onGridReady}
            serverSideDatasource={createDataSource()}
            serverSideStoreType={'partial'}
            rowSelection='single'
            onViewportChanged={onViewportChanged}
            blockLoadDebounceMillis={100}
        >
            {columnDefinition.map((column) => {
                return (
                    <AgGridColumn
                        headerName={column.headerName}
                        field={column.field}
                        suppressMenu={true}
                        sortable={column.sortable}
                        key={column.field}
                        resizable={column.resizable}
                        onCellClicked={column.onCellClicked}
                        cellRenderer={renderers[column.field] ? column.field : null}
                        valueFormatter={column.valueFormatter ?? null}
                        suppressSizeToFit={column.suppressSizeToFit}
                    ></AgGridColumn>
                );
            })}
        </AgGridReact>
    )
    }  
useEffect(() => {
    setGrid(<agGrid/>);
  }, []);

return (
<Fragment>
    <div className={`page-info`}>
        <span ref={domInfoRef}>
            {actualRange.from} - {actualRange.to} of {actualRange.total}
        </span>
    </div>
   {grid}
</Fragment>;
}
)

Explanation: This workaround forces to use single (same) instance of AG-grid per component lifecycle. It should be considered as hack IMO. But it's working.