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/monaco/highlightErrors.ts

@@ -1,17 +1,33 @@
+import React from 'react';
+
 import {parseYqlQueryWithoutCursor} from '@gravity-ui/websql-autocomplete/yql';
 import {MarkerSeverity, editor} from 'monaco-editor';
 
 import i18n from './i18n';
 
 const owner = 'ydb';
 
-let errorsHighlightingTimeoutId: ReturnType<typeof setTimeout>;
+export function useUpdateErrorsHighlighting() {
+    const errorsHighlightingTimerRef = React.useRef<number>();
+
+    React.useEffect(() => {
+        return () => {
+            if (errorsHighlightingTimerRef.current) {
+                clearTimeout(errorsHighlightingTimerRef.current);
+            }
+        };
+    }, []);
+
+    const updateErrorsHighlighting = React.useCallback(() => {
+        unHighlightErrors();
 
-export function updateErrorsHighlighting() {
-    unHighlightErrors();
+        if (errorsHighlightingTimerRef.current) {
+            clearTimeout(errorsHighlightingTimerRef.current);
+        }
+        errorsHighlightingTimerRef.current = window.setTimeout(() => highlightErrors(), 500);
+    }, []);
 
-    clearTimeout(errorsHighlightingTimeoutId);
-    errorsHighlightingTimeoutId = setTimeout(() => highlightErrors(), 500);
+    return updateErrorsHighlighting;
 }
 
 function highlightErrors() {