React agrid flash first row in the grid when only one record is present in grid

Question

I want to flash first row of the grid. My grid has only one row. I want to load data in grid and also flash the cell. I have sample code.If you notice method onInsertOne. It does not work very first time but it works when we click the button second time. How to flash cell for the first time.

        let items = [];
        gridAPI.forEachNode(function(rowNode, index) { 
            items.push(rowNode); --> row Node is empty for the first time.
        });

I also tried getDisplayedRowAtIndex(0) but no luck.

import {AgGridReact} from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

import {useState, useRef, useEffect, useMemo, useCallback} from 'react';
import {createOneCarRecord} from './carFactory';

let gridAPI = null;
export const AppHighLightFirstRow = () => {
    const gridRef = useRef();
    const [rowData, setRowData] = useState(null);
    let cars = [];
    
    const [columnDefs, setColumnDefs] = useState([
        { field: 'type', sortable: true },
        { field: 'year' },
        { field: 'color' },
        { field: 'price' }
    ])

    const getRowId = useCallback( params => {
        return params.data.id;
      });

    const onInsertOne = useCallback( ()=> {
        const newRecord = createOneCarRecord();
        let cars = [newRecord];
        setRowData(cars);

        let items = [];
        gridAPI.forEachNode(function(rowNode, index) { 
            items.push(rowNode);
        });

        console.log(`Items Length to highLight =${items.length}`,items)
        gridAPI.flashCells({ rowNodes: items , flashDelay: 2000, fadeDelay: 1000});

      });

      const onGridReady = (params) => {
        params.api.hideOverlay();
        gridAPI = params.api;
      }

    return (
        <div className="ag-theme-alpine" style={{height: '100%'}}>
        <div><button onClick={onInsertOne}>Insert One</button></div>
        <AgGridReact ref={gridRef}
          enableCellChangeFlash={true}
          getRowId={getRowId}
          rowSelection={'multiple'}
          rowData={rowData} 
          animateRows={true} 
          columnDefs={columnDefs}
          onGridReady={onGridReady}
          />
          </div>
    )
}

Answer 1

You can use onRowDataUpdated event

       <AgGridReact 
          ...
          onRowDataUpdated={({api}) => {
             const items = [];
             api.forEachNode(function(rowNode) { 
                items.push(rowNode);
             });

             console.log(`Items Length to highLight =${items.length}`,items)
             api.flashCells({ rowNodes: items , flashDelay: 2000, fadeDelay: 1000});
          }}
       />