fix(sqllab): Reduce flushing caused by ID updates (#34720)

superset-frontend/src/SqlLab/hooks/useQueryEditor/index.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { pick } from 'lodash';
+import { useMemo } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import { SqlLabRootState, QueryEditor } from 'src/SqlLab/types';
 
@@ -24,11 +25,20 @@ export default function useQueryEditor<T extends keyof QueryEditor>(
   sqlEditorId: string,
   attributes: ReadonlyArray<T>,
 ) {
+  const queryEditors = useSelector<SqlLabRootState, QueryEditor[]>(
+    ({ sqlLab: { queryEditors } }) => queryEditors,
+    shallowEqual,
+  );
+  const queryEditorsById = useMemo(
+    () => Object.fromEntries(queryEditors.map(editor => [editor.id, editor])),
+    [queryEditors.map(({ id }) => id).join(',')],
+  );
+
   return useSelector<SqlLabRootState, Pick<QueryEditor, T | 'id'>>(
-    ({ sqlLab: { unsavedQueryEditor, queryEditors } }) =>
+    ({ sqlLab: { unsavedQueryEditor } }) =>
       pick(
         {
-          ...queryEditors.find(({ id }) => id === sqlEditorId),
+          ...queryEditorsById[sqlEditorId],
           ...(sqlEditorId === unsavedQueryEditor?.id && unsavedQueryEditor),
         },
         ['id'].concat(attributes),