refactor: new DebouncedInput component

Author: Raubzeug

src/components/DebouncedInput/DebouncedInput.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import type {TextInputProps} from '@gravity-ui/uikit';
+import {TextInput} from '@gravity-ui/uikit';
+
+interface SearchProps extends TextInputProps {
+    debounce?: number;
+}
+
+export const DebouncedInput = ({onUpdate, value = '', debounce = 200, ...rest}: SearchProps) => {
+    const [currentValue, setCurrentValue] = React.useState<string>(value);
+
+    const timer = React.useRef<number>();
+
+    React.useEffect(() => {
+        setCurrentValue((prevValue) => {
+            if (prevValue !== value) {
+                return value;
+            }
+
+            return prevValue;
+        });
+    }, [value]);
+
+    const onSearchValueChange = (newValue: string) => {
+        setCurrentValue(newValue);
+
+        window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => {
+            onUpdate?.(newValue);
+        }, debounce);
+    };
+
+    return <TextInput value={currentValue} onUpdate={onSearchValueChange} {...rest} />;
+};

src/components/Search/Search.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import {TextInput} from '@gravity-ui/uikit';
-
 import {cn} from '../../utils/cn';
+import {DebouncedInput} from '../DebouncedInput/DebouncedInput';
 
 import './Search.scss';
 
@@ -22,41 +21,19 @@ export const Search = ({
     value = '',
     width,
     className,
-    debounce = 200,
+    debounce,
     placeholder,
 }: SearchProps) => {
-    const [searchValue, setSearchValue] = React.useState<string>(value);
-
-    const timer = React.useRef<number>();
-
-    React.useEffect(() => {
-        setSearchValue((prevValue) => {
-            if (prevValue !== value) {
-                return value;
-            }
-
-            return prevValue;
-        });
-    }, [value]);
-
-    const onSearchValueChange = (newValue: string) => {
-        setSearchValue(newValue);
-
-        window.clearTimeout(timer.current);
-        timer.current = window.setTimeout(() => {
-            onChange?.(newValue);
-        }, debounce);
-    };
-
     return (
-        <TextInput
+        <DebouncedInput
+            debounce={debounce}
             hasClear
             autoFocus
             style={{width}}
             className={b(null, className)}
             placeholder={placeholder}
-            value={searchValue}
-            onUpdate={onSearchValueChange}
+            value={value}
+            onUpdate={onChange}
         />
     );
 };