fix(sqllab): Over-rendering on result table (#30857)

superset-frontend/src/SqlLab/components/ResultSet/index.tsx

@@ -23,6 +23,7 @@ import {
   memo,
   ChangeEvent,
   MouseEvent,
+  useMemo,
 } from 'react';
 
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -154,6 +155,7 @@ const ResultSetButtons = styled.div`
 const GAP = 8;
 
 const extensionsRegistry = getExtensionsRegistry();
+const EMPTY: string[] = [];
 
 const ResultSet = ({
   cache = false,
@@ -215,6 +217,14 @@ const ResultSet = ({
   const [cachedData, setCachedData] = useState<Record<string, unknown>[]>([]);
   const [showSaveDatasetModal, setShowSaveDatasetModal] = useState(false);
   const [showStreamingModal, setShowStreamingModal] = useState(false);
+  const orderedColumnKeys = useMemo(
+    () => query.results?.columns?.map(col => col.column_name) ?? EMPTY,
+    [query.results?.columns],
+  );
+  const expandedColumns = useMemo(
+    () => query.results?.expanded_columns?.map(col => col.column_name) ?? EMPTY,
+    [query.results?.expanded_columns],
+  );
 
   const history = useHistory();
   const dispatch = useDispatch();
@@ -659,9 +669,6 @@ const ResultSet = ({
       ({ data } = results);
     }
     if (data && data.length > 0) {
-      const expandedColumns = results.expanded_columns
-        ? results.expanded_columns.map(col => col.column_name)
-        : [];
       const allowHTML = getItem(
         LocalStorageKeys.SqllabIsRenderHtmlEnabled,
         true,
@@ -670,7 +677,7 @@ const ResultSet = ({
       const tableProps = {
         data,
         queryId: query.id,
-        orderedColumnKeys: results.columns.map(col => col.column_name),
+        orderedColumnKeys,
         filterText: searchText,
         expandedColumns,
         allowHTML,

superset-frontend/src/components/FilterableTable/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useMemo, useRef, useCallback } from 'react';
+import { useMemo, useRef, useCallback, memo } from 'react';
 import { GridSize } from 'src/components/GridTable/constants';
 import { GridTable } from 'src/components/GridTable';
 import { type ColDef } from 'src/components/GridTable/types';
@@ -137,3 +137,4 @@ export const FilterableTable = ({
 };
 
 export type { FilterableTableProps };
+export default memo(FilterableTable);