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) => {
-                    idRef.current = id;
-                    return setBackground({
-                        background: color.rgb,
-                        isDark: color.isDark,
-                        isLight: color.isLight,
-                    });
+                    if (isMounted) {
+                        idRef.current = id;
+                        setBackground({
+                            background: color.rgb,
+                            isDark: color.isDark,
+                            isLight: color.isLight,
+                        });
+                        setIsLoading(false);
+                    }
                 })
                 .catch((e) => {
-                    console.error('Error fetching average color', e);
-                    idRef.current = id;
-                    return setBackground({
-                        background: 'rgba(0, 0, 0, 0)',
-                        isDark: true,
-                        isLight: false,
-                    });
-                })
-                .finally(() => {
-                    setIsLoading(false);
+                    if (isMounted) {
+                        console.error('Error fetching average color', e);
+                        idRef.current = id;
+                        setBackground({
+                            background: 'rgba(0, 0, 0, 0)',
+                            isDark: true,
+                            isLight: false,
+                        });
+                        setIsLoading(false);
+                    }
                 });
         } else if (srcLoaded) {
-            idRef.current = id;
-            return setBackground({
-                background: 'var(--theme-colors-foreground-muted)',
-                isDark: true,
-                isLight: false,
-            });
+            if (isMounted) {
+                idRef.current = id;
+                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);
-        clearInterval(intervalRef.current);
+        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) {
-            clearInterval(intervalRef.current);
+            if (intervalRef.current !== null) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
             setIsRunning(false);
             clear();
         } else {