fix: review

Author: Raubzeug

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -42,7 +42,7 @@ import {
 import {useChangedQuerySettings} from '../../../../utils/hooks/useChangedQuerySettings';
 import {useLastQueryExecutionSettings} from '../../../../utils/hooks/useLastQueryExecutionSettings';
 import {YQL_LANGUAGE_ID} from '../../../../utils/monaco/constats';
-import {updateErrorsHighlighting} from '../../../../utils/monaco/highlightErrors';
+import {useUpdateErrorsHighlighting} from '../../../../utils/monaco/highlightErrors';
 import {QUERY_ACTIONS} from '../../../../utils/query';
 import type {InitialPaneState} from '../../utils/paneVisibilityToggleHelpers';
 import {
@@ -90,6 +90,8 @@ export default function QueryEditor(props: QueryEditorProps) {
     const input = useTypedSelector(selectUserInput);
     const showPreview = useTypedSelector(selectShowPreview);
 
+    const updateErrorsHighlighting = useUpdateErrorsHighlighting();
+
     const isResultLoaded = Boolean(result);
 
     const [querySettings] = useQueryExecutionSettings();

src/utils/hooks/useCancellable.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export function useCancellableFunction<T extends {cancel: () => void}>(cancellable: T) {
+    React.useEffect(() => {
+        return () => {
+            cancellable.cancel();
+        };
+    }, [cancellable]);
+    return cancellable;
+}

src/utils/monaco/highlightErrors.ts

@@ -1,17 +1,25 @@
+import React from 'react';
+
 import {parseYqlQueryWithoutCursor} from '@gravity-ui/websql-autocomplete/yql';
 import {debounce} from 'lodash';
 import {MarkerSeverity, editor} from 'monaco-editor';
 
+import {useCancellableFunction} from '../hooks/useCancellable';
+
 import i18n from './i18n';
 
 const owner = 'ydb';
 
 const debouncedHighlightErrors = debounce(highlightErrors, 500);
 
-export function updateErrorsHighlighting() {
-    unHighlightErrors();
+export function useUpdateErrorsHighlighting() {
+    const highlightErrors = useCancellableFunction(debouncedHighlightErrors);
+    const updateErrorsHighlighting = React.useCallback(() => {
+        unHighlightErrors();
 
-    debouncedHighlightErrors();
+        highlightErrors();
+    }, [highlightErrors]);
+    return updateErrorsHighlighting;
 }
 
 function highlightErrors() {