Remove deps from useDebounce hook

ui/v2.5/.eslintrc.json

@@ -53,10 +53,6 @@
     "import/namespace": "off",
     "import/no-unresolved": "off",
     "react/display-name": "off",
-    "react-hooks/exhaustive-deps": [
-      "error",
-      { "additionalHooks": "^(useDebounce)$" }
-    ],
     "react/prop-types": "off",
     "react/style-prop-object": [
       "error",

ui/v2.5/src/components/List/Filters/SelectableFilter.tsx

@@ -22,7 +22,7 @@ import {
 import { defineMessages, MessageDescriptor, useIntl } from "react-intl";
 import { CriterionModifier } from "src/core/generated-graphql";
 import { keyboardClickHandler } from "src/utils/keyboard";
-import { useDebouncedSetState } from "src/hooks/debounce";
+import { useDebounce } from "src/hooks/debounce";
 import useFocus from "src/utils/focus";
 
 interface ISelectedItem {
@@ -192,7 +192,7 @@ export const ObjectsFilter = <
   const [query, setQuery] = useState("");
   const [displayQuery, setDisplayQuery] = useState(query);
 
-  const debouncedSetQuery = useDebouncedSetState(setQuery, 250);
+  const debouncedSetQuery = useDebounce(setQuery, 250);
   const onQueryChange = useCallback(
     (input: string) => {
       setDisplayQuery(input);

ui/v2.5/src/components/List/ListFilter.tsx

@@ -75,16 +75,12 @@ export const ListFilter: React.FC<IListFilterProps> = ({
     [filter, onFilterUpdate]
   );
 
-  const searchCallback = useDebounce(
-    (value: string) => {
-      const newFilter = cloneDeep(filter);
-      newFilter.searchTerm = value;
-      newFilter.currentPage = 1;
-      onFilterUpdate(newFilter);
-    },
-    [filter, onFilterUpdate],
-    500
-  );
+  const searchCallback = useDebounce((value: string) => {
+    const newFilter = cloneDeep(filter);
+    newFilter.searchTerm = value;
+    newFilter.currentPage = 1;
+    onFilterUpdate(newFilter);
+  }, 500);
 
   const intl = useIntl();
 

ui/v2.5/src/components/Performers/PerformerDetails/PerformerScrapeModal.tsx

@@ -6,7 +6,7 @@ import * as GQL from "src/core/generated-graphql";
 import { ModalComponent } from "src/components/Shared/Modal";
 import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { useScrapePerformerList } from "src/core/StashService";
-import { useDebouncedSetState } from "src/hooks/debounce";
+import { useDebounce } from "src/hooks/debounce";
 
 const CLASSNAME = "PerformerScrapeModal";
 const CLASSNAME_LIST = `${CLASSNAME}-list`;
@@ -33,7 +33,7 @@ const PerformerScrapeModal: React.FC<IProps> = ({
 
   const performers = data?.scrapeSinglePerformer ?? [];
 
-  const onInputChange = useDebouncedSetState(setQuery, 500);
+  const onInputChange = useDebounce(setQuery, 500);
 
   useEffect(() => inputRef.current?.focus(), []);
 

ui/v2.5/src/components/Performers/PerformerDetails/PerformerStashBoxModal.tsx

@@ -6,7 +6,7 @@ import * as GQL from "src/core/generated-graphql";
 import { ModalComponent } from "src/components/Shared/Modal";
 import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { stashboxDisplayName } from "src/utils/stashbox";
-import { useDebouncedSetState } from "src/hooks/debounce";
+import { useDebounce } from "src/hooks/debounce";
 
 const CLASSNAME = "PerformerScrapeModal";
 const CLASSNAME_LIST = `${CLASSNAME}-list`;
@@ -44,7 +44,7 @@ const PerformerStashBoxModal: React.FC<IProps> = ({
 
   const performers = data?.scrapeSinglePerformer ?? [];
 
-  const onInputChange = useDebouncedSetState(setQuery, 500);
+  const onInputChange = useDebounce(setQuery, 500);
 
   useEffect(() => inputRef.current?.focus(), []);
 

ui/v2.5/src/components/Settings/context.tsx

@@ -134,7 +134,7 @@ export const SettingsContext: React.FC = ({ children }) => {
     setUI(data.configuration.ui);
   }, [data, error]);
 
-  const resetSuccess = useDebounce(() => setUpdateSuccess(undefined), [], 4000);
+  const resetSuccess = useDebounce(() => setUpdateSuccess(undefined), 4000);
 
   const onSuccess = useCallback(() => {
     setUpdateSuccess(true);
@@ -158,7 +158,6 @@ export const SettingsContext: React.FC = ({ children }) => {
         setSaveError(e);
       }
     },
-    [updateGeneralConfig, onSuccess],
     500
   );
 
@@ -208,7 +207,6 @@ export const SettingsContext: React.FC = ({ children }) => {
         setSaveError(e);
       }
     },
-    [updateInterfaceConfig, onSuccess],
     500
   );
 
@@ -258,7 +256,6 @@ export const SettingsContext: React.FC = ({ children }) => {
         setSaveError(e);
       }
     },
-    [updateDefaultsConfig, onSuccess],
     500
   );
 
@@ -308,7 +305,6 @@ export const SettingsContext: React.FC = ({ children }) => {
         setSaveError(e);
       }
     },
-    [updateScrapingConfig, onSuccess],
     500
   );
 
@@ -342,25 +338,21 @@ export const SettingsContext: React.FC = ({ children }) => {
   }
 
   // saves the configuration if no further changes are made after a half second
-  const saveDLNAConfig = useDebounce(
-    async (input: GQL.ConfigDlnaInput) => {
-      try {
-        setUpdateSuccess(undefined);
-        await updateDLNAConfig({
-          variables: {
-            input,
-          },
-        });
-
-        setPendingDLNA(undefined);
-        onSuccess();
-      } catch (e) {
-        setSaveError(e);
-      }
-    },
-    [updateDLNAConfig, onSuccess],
-    500
-  );
+  const saveDLNAConfig = useDebounce(async (input: GQL.ConfigDlnaInput) => {
+    try {
+      setUpdateSuccess(undefined);
+      await updateDLNAConfig({
+        variables: {
+          input,
+        },
+      });
+
+      setPendingDLNA(undefined);
+      onSuccess();
+    } catch (e) {
+      setSaveError(e);
+    }
+  }, 500);
 
   useEffect(() => {
     if (!pendingDLNA) {
@@ -392,25 +384,21 @@ export const SettingsContext: React.FC = ({ children }) => {
   }
 
   // saves the configuration if no further changes are made after a half second
-  const saveUIConfig = useDebounce(
-    async (input: IUIConfig) => {
-      try {
-        setUpdateSuccess(undefined);
-        await updateUIConfig({
-          variables: {
-            input,
-          },
-        });
-
-        setPendingUI(undefined);
-        onSuccess();
-      } catch (e) {
-        setSaveError(e);
-      }
-    },
-    [updateUIConfig, onSuccess],
-    500
-  );
+  const saveUIConfig = useDebounce(async (input: IUIConfig) => {
+    try {
+      setUpdateSuccess(undefined);
+      await updateUIConfig({
+        variables: {
+          input,
+        },
+      });
+
+      setPendingUI(undefined);
+      onSuccess();
+    } catch (e) {
+      setSaveError(e);
+    }
+  }, 500);
 
   useEffect(() => {
     if (!pendingUI) {

ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx

@@ -5,7 +5,7 @@ import { Icon } from "../Icon";
 import { LoadingIndicator } from "../LoadingIndicator";
 import { useDirectory } from "src/core/StashService";
 import { faEllipsis, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { useDebouncedSetState } from "src/hooks/debounce";
+import { useDebounce } from "src/hooks/debounce";
 
 interface IProps {
   currentDirectory: string;
@@ -44,7 +44,7 @@ export const FolderSelect: React.FC<IProps> = ({
       (error && hideError ? [] : defaultDirectoriesOrEmpty)
     : defaultDirectoriesOrEmpty;
 
-  const debouncedSetDirectory = useDebouncedSetState(setDirectory, 250);
+  const debouncedSetDirectory = useDebounce(setDirectory, 250);
 
   useEffect(() => {
     if (currentDirectory !== directory) {

ui/v2.5/src/components/Shared/Select.tsx

@@ -30,7 +30,7 @@ import { objectTitle } from "src/core/files";
 import { galleryTitle } from "src/core/galleries";
 import { TagPopover } from "../Tags/TagPopover";
 import { defaultMaxOptionsShown, IUIConfig } from "src/core/config";
-import { useDebouncedSetState } from "src/hooks/debounce";
+import { useDebounce } from "src/hooks/debounce";
 
 export type SelectObject = {
   id: string;
@@ -354,7 +354,7 @@ export const GallerySelect: React.FC<ITitledSelect> = (props) => {
     value: g.id,
   }));
 
-  const onInputChange = useDebouncedSetState(setQuery, 500);
+  const onInputChange = useDebounce(setQuery, 500);
 
   const onChange = (selectedItems: OnChangeValue<Option, boolean>) => {
     const selected = getSelectedItems(selectedItems);
@@ -405,7 +405,7 @@ export const SceneSelect: React.FC<ITitledSelect> = (props) => {
     value: s.id,
   }));
 
-  const onInputChange = useDebouncedSetState(setQuery, 500);
+  const onInputChange = useDebounce(setQuery, 500);
 
   const onChange = (selectedItems: OnChangeValue<Option, boolean>) => {
     const selected = getSelectedItems(selectedItems);
@@ -455,7 +455,7 @@ export const ImageSelect: React.FC<ITitledSelect> = (props) => {
     value: s.id,
   }));
 
-  const onInputChange = useDebouncedSetState(setQuery, 500);
+  const onInputChange = useDebounce(setQuery, 500);
 
   const onChange = (selectedItems: OnChangeValue<Option, boolean>) => {
     const selected = getSelectedItems(selectedItems);

ui/v2.5/src/components/Shared/TruncatedText.tsx

@@ -25,11 +25,7 @@ export const TruncatedText: React.FC<ITruncatedTextProps> = ({
   const [showTooltip, setShowTooltip] = useState(false);
   const target = useRef(null);
 
-  const startShowingTooltip = useDebounce(
-    () => setShowTooltip(true),
-    [],
-    delay
-  );
+  const startShowingTooltip = useDebounce(() => setShowTooltip(true), delay);
 
   if (!text) return <></>;
 

ui/v2.5/src/hooks/Lightbox/Lightbox.tsx

@@ -212,7 +212,6 @@ export const LightboxComponent: React.FC<IProps> = ({
 
   const disableInstantTransition = useDebounce(
     () => setInstantTransition(false),
-    [],
     400
   );
 

ui/v2.5/src/hooks/debounce.ts

@@ -2,22 +2,23 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { DebounceSettings } from "lodash-es";
 import debounce, { DebouncedFunc } from "lodash-es/debounce";
-import React, { useCallback } from "react";
+import { useCallback, useRef } from "react";
 
 export function useDebounce<T extends (...args: any) => any>(
   fn: T,
-  deps: React.DependencyList,
   wait?: number,
   options?: DebounceSettings
 ): DebouncedFunc<T> {
-  return useCallback(debounce(fn, wait, options), [...deps, wait, options]);
-}
-
-// Convenience hook for use with state setters
-export function useDebouncedSetState<S>(
-  fn: React.Dispatch<React.SetStateAction<S>>,
-  wait?: number,
-  options?: DebounceSettings
-): DebouncedFunc<React.Dispatch<React.SetStateAction<S>>> {
-  return useDebounce(fn, [], wait, options);
+  const func = useRef<T>(fn);
+  func.current = fn;
+  return useCallback(
+    debounce(
+      function (this: any) {
+        return func.current.apply(this, arguments as any);
+      },
+      wait,
+      options
+    ),
+    [wait, options?.leading, options?.trailing, options?.maxWait]
+  );
 }