fix(FR-2852): resolve react-doctor error-level findings

packages/backend.ai-ui/src/components/BAIDynamicStepInputNumber.tsx

@@ -33,9 +33,10 @@ const BAIDynamicStepInputNumber: React.FC<BAIDynamicStepInputNumberProps> = ({
   // FIXME: this is a workaround to fix the issue that the value is not updated when the value is controlled
   const [key, updateKey] = useUpdatableState('first');
   useEffect(() => {
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       updateKey(value.toString());
     }, 0);
+    return () => clearTimeout(timeoutId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

packages/backend.ai-ui/src/components/BAIDynamicUnitInputNumberWithSlider.tsx

@@ -55,9 +55,10 @@ const BAIDynamicUnitInputNumberWithSlider: React.FC<
   // FIXME: this is a workaround to fix the issue that the value is not updated when the value is controlled
   const [key, updateKey] = useUpdatableState('first');
   useEffect(() => {
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       updateKey(value?.toString());
     }, 0);
+    return () => clearTimeout(timeoutId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

packages/backend.ai-ui/src/components/BAIFetchKeyButton.tsx

@@ -5,7 +5,7 @@ import { useControllableValue } from 'ahooks';
 import { Button, Tooltip, type ButtonProps } from 'antd';
 import dayjs from 'dayjs';
 import * as _ from 'lodash-es';
-import React, { useEffect, useLayoutEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface BAIFetchKeyButtonProps extends Omit<
@@ -62,18 +62,24 @@ const BAIFetchKeyButton: React.FC<BAIFetchKeyButtonProps> = ({
 
   // display loading icon for at least "some ms" to avoid flickering
   const [displayLoading, setDisplayLoading] = useState(false);
+  const turnOffTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
     if (loading) {
       const startTime = Date.now();
+      if (turnOffTimeoutRef.current !== null) {
+        clearTimeout(turnOffTimeoutRef.current);
+        turnOffTimeoutRef.current = null;
+      }
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setDisplayLoading(true);
 
       return () => {
         const elapsedTime = Date.now() - startTime;
         const remainingTime = Math.max(700 - elapsedTime, 0);
 
-        setTimeout(() => {
+        turnOffTimeoutRef.current = setTimeout(() => {
           setDisplayLoading(false);
+          turnOffTimeoutRef.current = null;
         }, remainingTime);
       };
     }

react/src/components/DefaultProviders.tsx

@@ -189,10 +189,11 @@ export const useCurrentLanguage = () => {
 
   useEffect(() => {
     // TODO: remove this hack to initialize i18next
-    setTimeout(() => i18n?.changeLanguage(lang), 0);
+    const timeoutId = setTimeout(() => i18n?.changeLanguage(lang), 0);
     // For changing locale globally, use dayjs.locale instead of dayjs().locale
     dayjs.locale(lang);
     document.documentElement.lang = lang;
+    return () => clearTimeout(timeoutId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

react/src/components/ImportNotebookForm.tsx

@@ -227,6 +227,7 @@ const ImportNotebookForm: React.FC<ImportNotebookFormProps> = ({
               <BAIFlex justify="start" gap={'sm'} wrap="wrap">
                 <img
                   src="/resources/badge.svg"
+                  alt="Run on Backend.AI"
                   style={{ marginTop: 5, marginBottom: 5 }}
                   width="147"
                 />

react/src/components/InputNumberWithSlider.tsx

@@ -61,9 +61,10 @@ const InputNumberWithSlider: React.FC<InputNumberWithSliderProps> = ({
   const [key, updateKey] = useUpdatableState('first');
   useEffect(() => {
     if (!allowNegative) {
-      setTimeout(() => {
+      const timeoutId = setTimeout(() => {
         updateKey(value);
       }, 0);
+      return () => clearTimeout(timeoutId);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

react/src/components/MainLayout/MainLayout.tsx

@@ -359,6 +359,8 @@ const LayoutWithPageTestId: React.FC<LayoutProps> = (props) => {
   const pageTest = useMemo(() => {
     const cleanPath = location.pathname.replace(/^\//, '').replace(/\//g, '-');
     return cleanPath ? `page-${cleanPath}` : 'page-root';
+    // `location` is from react-router useLocation() — pathname is reactive across navigations.
+    // react-doctor-disable-next-line react-doctor/no-mutable-in-deps
   }, [location.pathname]);
   return <Layout {...props} data-testid={pageTest} />;
 };

react/src/components/MainLayout/WebUISider.tsx

@@ -95,6 +95,8 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
     if (!isCurrentPathAdminCategory) {
       setGoBackPath(location.pathname);
     }
+    // `location` is from react-router useLocation() — pathname is reactive across navigations.
+    // react-doctor-disable-next-line react-doctor/no-mutable-in-deps
   }, [setGoBackPath, location.pathname, isCurrentPathAdminCategory]);
 
   const adminHeader = (

react/src/components/NetworkStatusBanner.tsx

@@ -44,6 +44,16 @@ const NetworkStatusBanner = () => {
       'backend-ai-network-success-without-soft-time-out',
       successHandler,
     );
+    return () => {
+      document.removeEventListener(
+        'backend-ai-network-soft-time-out',
+        softHandler,
+      );
+      document.removeEventListener(
+        'backend-ai-network-success-without-soft-time-out',
+        successHandler,
+      );
+    };
   }, []);
 
   const debouncedShowAlert = useDebounce(showSoftTimeoutAlert, {

react/src/components/PluginLoader.tsx

@@ -240,6 +240,8 @@ function PluginLoader() {
         element.style.minHeight = '';
       }
     });
+    // `location` is from react-router useLocation() — pathname is reactive across navigations.
+    // react-doctor-disable-next-line react-doctor/no-mutable-in-deps
   }, [location.pathname]);
 
   return (

react/src/components/ServiceValidationView.tsx

@@ -140,6 +140,9 @@ const ServiceValidationView: React.FC<ServiceValidationModalProps> = ({
   });
 
   const isRunningRef = useRef<boolean>(false);
+  const validationTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
   useEffect(() => {
     if (isRunningRef.current) return;
 
@@ -154,6 +157,7 @@ const ServiceValidationView: React.FC<ServiceValidationModalProps> = ({
           setValidationStatus('error');
           message.error(t('modelService.CannotValidateNow'));
         }, 60000);
+        validationTimeoutRef.current = timeoutId;
 
         const SSEEventHandlers: SSEEventHandlerTypes<BackgroundTaskEvent> = {
           onUpdated: async (data, controller) => {
@@ -211,6 +215,12 @@ const ServiceValidationView: React.FC<ServiceValidationModalProps> = ({
         isRunningRef.current = false;
       });
     isRunningRef.current = true;
+    return () => {
+      if (validationTimeoutRef.current !== null) {
+        clearTimeout(validationTimeoutRef.current);
+        validationTimeoutRef.current = null;
+      }
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

react/src/pages/StartPage.tsx

@@ -84,6 +84,8 @@ const StartPage: React.FC = () => {
       return pathAfterGithub;
     }
     return null;
+    // `location` is from react-router useLocation() — pathname/search are reactive across navigations.
+    // react-doctor-disable-next-line react-doctor/no-mutable-in-deps
   }, [location.search, queryParams.type]);
 
   const badgeEventHandler = useEffectEvent(() => {