fix(sqllab): perf regression on #21532 refactor (#21632)

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

@@ -24,16 +24,11 @@ import Button from 'src/components/Button';
 import Icons from 'src/components/Icons';
 import { DropdownButton } from 'src/components/DropdownButton';
 import { detectOS } from 'src/utils/common';
-import { shallowEqual, useSelector } from 'react-redux';
-import {
-  QueryEditor,
-  SqlLabRootState,
-  QueryButtonProps,
-} from 'src/SqlLab/types';
-import { getUpToDateQuery } from 'src/SqlLab/actions/sqlLab';
+import { QueryButtonProps } from 'src/SqlLab/types';
+import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
 
 export interface Props {
-  queryEditor: QueryEditor;
+  queryEditorId: string;
   allowAsync: boolean;
   queryState?: string;
   runQuery: (c?: boolean) => void;
@@ -86,29 +81,21 @@ const StyledButton = styled.span`
   }
 `;
 
-const RunQueryActionButton = ({
+const RunQueryActionButton: React.FC<Props> = ({
   allowAsync = false,
-  queryEditor,
+  queryEditorId,
   queryState,
   overlayCreateAsMenu,
   runQuery,
   stopQuery,
-}: Props) => {
+}) => {
   const theme = useTheme();
   const userOS = detectOS();
-  const { selectedText, sql } = useSelector<
-    SqlLabRootState,
-    Pick<QueryEditor, 'selectedText' | 'sql'>
-  >(rootState => {
-    const currentQueryEditor = getUpToDateQuery(
-      rootState,
-      queryEditor,
-    ) as unknown as QueryEditor;
-    return {
-      selectedText: currentQueryEditor.selectedText,
-      sql: currentQueryEditor.sql,
-    };
-  }, shallowEqual);
+
+  const { selectedText, sql } = useQueryEditor(queryEditorId, [
+    'selectedText',
+    'sql',
+  ]);
 
   const shouldShowStopBtn =
     !!queryState && ['running', 'pending'].indexOf(queryState) > -1;
@@ -117,7 +104,10 @@ const RunQueryActionButton = ({
     ? (DropdownButton as React.FC)
     : Button;
 
-  const isDisabled = !sql || !sql.trim();
+  const sqlContent = selectedText || sql || '';
+  const isDisabled =
+    !sqlContent ||
+    !sqlContent.replace(/(\/\*[^*]*\*\/)|(\/\/[^*]*)|(--[^.].*)/gm, '').trim();
 
   const stopButtonTooltipText = useMemo(
     () =>