optimize various components

src/renderer/features/shared/components/search-input.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, CSSProperties, KeyboardEvent, useRef, useState } from 'react';
+import { ChangeEvent, CSSProperties, KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useSettingsStore } from '/@/renderer/store';
@@ -58,10 +58,24 @@ export const SearchInput = ({
         }
     };
 
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
     const handleButtonClick = () => {
         setIsInputMode(true);
-        setTimeout(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
             ref?.current?.focus();
+            timeoutRef.current = null;
         }, 0);
     };
 

src/renderer/hooks/use-fast-average-color.tsx

@@ -42,6 +42,7 @@ export const useFastAverageColor = (args: {
     });
 
     useEffect(() => {
+        let isMounted = true;
         const fac = new FastAverageColor();
 
         if (src && srcLoaded) {
@@ -56,35 +57,41 @@ export const useFastAverageColor = (args: {
                 mode: 'speed',
             })
                 .then((color) => {
+                    if (isMounted) {
                         idRef.current = id;
-                    return setBackground({
+                        setBackground({
                             background: color.rgb,
                             isDark: color.isDark,
                             isLight: color.isLight,
                         });
+                        setIsLoading(false);
+                    }
                 })
                 .catch((e) => {
+                    if (isMounted) {
                         console.error('Error fetching average color', e);
                         idRef.current = id;
-                    return setBackground({
+                        setBackground({
                             background: 'rgba(0, 0, 0, 0)',
                             isDark: true,
                             isLight: false,
                         });
-                })
-                .finally(() => {
                         setIsLoading(false);
+                    }
                 });
         } else if (srcLoaded) {
+            if (isMounted) {
                 idRef.current = id;
-            return setBackground({
+                setBackground({
                     background: 'var(--theme-colors-foreground-muted)',
                     isDark: true,
                     isLight: false,
                 });
             }
+        }
 
         return () => {
+            isMounted = false;
             fac.destroy();
         };
     }, [algorithm, srcLoaded, src, id]);

src/shared/components/button/button.tsx

@@ -2,7 +2,7 @@ import type { ButtonVariant, ButtonProps as MantineButtonProps } from '@mantine/
 
 import { ElementProps, Button as MantineButton } from '@mantine/core';
 import clsx from 'clsx';
-import { forwardRef, useCallback, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
 import styles from './button.module.css';
 
@@ -117,20 +117,35 @@ interface TimeoutButtonProps extends ButtonProps {
 export const TimeoutButton = ({ timeoutProps, ...props }: TimeoutButtonProps) => {
     const [, setTimeoutRemaining] = useState(timeoutProps.duration);
     const [isRunning, setIsRunning] = useState(false);
-    const intervalRef = useRef(0);
+    const intervalRef = useRef<null | number>(null);
 
     const callback = () => {
         timeoutProps.callback();
         setTimeoutRemaining(timeoutProps.duration);
+        if (intervalRef.current !== null) {
             clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
         setIsRunning(false);
     };
 
     const { clear, start } = useTimeout(callback, timeoutProps.duration);
 
+    useEffect(() => {
+        return () => {
+            if (intervalRef.current !== null) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, []);
+
     const startTimeout = useCallback(() => {
         if (isRunning) {
+            if (intervalRef.current !== null) {
                 clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
             setIsRunning(false);
             clear();
         } else {