Revert "remove refreshKey, which was causing multiple grid rendering issue (#18710)" (#18823)

This reverts commit 604cd25.

Author: cssuh

src/reactviews/pages/QueryResult/queryResultPane.tsx

@@ -428,6 +428,7 @@ export const QueryResultPane = () => {
 
     const renderGridPanel = () => {
         const grids = [];
+        gridRefs.current.forEach((r) => r?.refreshGrid());
         let count = 0;
         for (const batchIdStr in state?.resultSetSummaries ?? {}) {
             const batchId = parseInt(batchIdStr);

src/reactviews/pages/QueryResult/resultGrid.tsx

@@ -10,6 +10,7 @@ import {
     useEffect,
     useImperativeHandle,
     useRef,
+    useState,
 } from "react";
 import "../../media/slickgrid.css";
 import { ACTIONBAR_WIDTH_PX, range, Table } from "./table/table";
@@ -79,6 +80,7 @@ const ResultGrid = forwardRef<ResultGridHandle, ResultGridProps>(
             return undefined;
         }
         const gridContainerRef = useRef<HTMLDivElement>(null);
+        const [refreshkey, setRefreshKey] = useState(0);
         const refreshGrid = () => {
             if (gridContainerRef.current) {
                 while (gridContainerRef.current.firstChild) {
@@ -87,6 +89,7 @@ const ResultGrid = forwardRef<ResultGridHandle, ResultGridProps>(
                     );
                 }
             }
+            setRefreshKey((prev) => prev + 1);
         };
         const resizeGrid = (width: number, height: number) => {
             let gridParent: HTMLElement | null;
@@ -308,7 +311,7 @@ const ResultGrid = forwardRef<ResultGridHandle, ResultGridProps>(
                     ),
                 );
             }
-        }, []);
+        }, [refreshkey]);
 
         useImperativeHandle(ref, () => ({
             refreshGrid,