chore: Remove dependency warnings from SqlEditor/index.jsx (#22974)

superset-frontend/src/SqlLab/components/SqlEditor/index.jsx

@@ -18,7 +18,13 @@
  */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  useCallback,
+} from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -245,7 +251,8 @@ const SqlEditor = ({
   const sqlEditorRef = useRef(null);
   const northPaneRef = useRef(null);
 
-  const startQuery = (ctasArg = false, ctas_method = CtasEnum.TABLE) => {
+  const startQuery = useCallback(
+    (ctasArg = false, ctas_method = CtasEnum.TABLE) => {
       if (!database) {
         return;
       }
@@ -261,14 +268,16 @@ const SqlEditor = ({
         ),
       );
       dispatch(setActiveSouthPaneTab('Results'));
-  };
+    },
+    [ctas, database, defaultQueryLimit, dispatch, queryEditor],
+  );
 
-  const stopQuery = () => {
+  const stopQuery = useCallback(() => {
     if (latestQuery && ['running', 'pending'].indexOf(latestQuery.state) >= 0) {
       dispatch(postStopQuery(latestQuery));
     }
     return false;
-  };
+  }, [dispatch, latestQuery]);
 
   const runQuery = () => {
     if (database) {
@@ -282,7 +291,7 @@ const SqlEditor = ({
       dispatch(queryEditorSetAutorun(queryEditor, false));
       startQuery();
     }
-  }, []);
+  }, [autorun, dispatch, queryEditor, startQuery]);
 
   // One layer of abstraction for easy spying in unit tests
   const getSqlEditorHeight = () =>
@@ -290,7 +299,7 @@ const SqlEditor = ({
       ? sqlEditorRef.current.clientHeight - SQL_EDITOR_PADDING * 2
       : 0;
 
-  const getHotkeyConfig = () => {
+  const getHotkeyConfig = useCallback(() => {
     // Get the user's OS
     const userOS = detectOS();
     const base = [
@@ -342,18 +351,19 @@ const SqlEditor = ({
     }
 
     return base;
-  };
+  }, [dispatch, queryEditor.sql, startQuery, stopQuery]);
 
-  const handleWindowResize = () => {
+  const handleWindowResize = useCallback(() => {
     setHeight(getSqlEditorHeight());
-  };
+  }, []);
 
   const handleWindowResizeWithThrottle = useMemo(
     () => throttle(handleWindowResize, WINDOW_RESIZE_THROTTLE_MS),
-    [],
+    [handleWindowResize],
   );
 
-  const onBeforeUnload = event => {
+  const onBeforeUnload = useCallback(
+    event => {
       if (
         database?.extra_json?.cancel_query_on_windows_unload &&
         latestQuery?.state === 'running'
@@ -361,7 +371,13 @@ const SqlEditor = ({
         event.preventDefault();
         stopQuery();
       }
-  };
+    },
+    [
+      database?.extra_json?.cancel_query_on_windows_unload,
+      latestQuery?.state,
+      stopQuery,
+    ],
+  );
 
   useEffect(() => {
     // We need to measure the height of the sql editor post render to figure the height of
@@ -378,7 +394,7 @@ const SqlEditor = ({
       window.removeEventListener('resize', handleWindowResizeWithThrottle);
       window.removeEventListener('beforeunload', onBeforeUnload);
     };
-  }, []);
+  }, [database, handleWindowResizeWithThrottle, onBeforeUnload]);
 
   useEffect(() => {
     // setup hotkeys
@@ -387,7 +403,7 @@ const SqlEditor = ({
     hotkeys.forEach(keyConfig => {
       Mousetrap.bind([keyConfig.key], keyConfig.func);
     });
-  }, [latestQuery]);
+  }, [getHotkeyConfig, latestQuery]);
 
   const onResizeStart = () => {
     // Set the heights on the ace editor and the ace content area after drag starts
@@ -404,13 +420,16 @@ const SqlEditor = ({
     }
   };
 
-  const setQueryEditorAndSaveSql = sql => {
+  const setQueryEditorAndSaveSql = useCallback(
+    sql => {
       dispatch(queryEditorSetAndSaveSql(queryEditor, sql));
-  };
+    },
+    [dispatch, queryEditor],
+  );
 
   const setQueryEditorAndSaveSqlWithDebounce = useMemo(
     () => debounce(setQueryEditorAndSaveSql, SET_QUERY_EDITOR_SQL_DEBOUNCE_MS),
-    [],
+    [setQueryEditorAndSaveSql],
   );
 
   const canValidateQuery = () => {
@@ -422,15 +441,18 @@ const SqlEditor = ({
     return false;
   };
 
-  const requestValidation = sql => {
+  const requestValidation = useCallback(
+    sql => {
       if (database) {
         dispatch(validateQuery(queryEditor, sql));
       }
-  };
+    },
+    [database, dispatch, queryEditor],
+  );
 
   const requestValidationWithDebounce = useMemo(
     () => debounce(requestValidation, VALIDATION_DEBOUNCE_MS),
-    [],
+    [requestValidation],
   );
 
   const onSqlChanged = sql => {