From 4215afcb92edcbfa2b14ca9ca042fd554edeeb88 Mon Sep 17 00:00:00 2001
From: Harshith Mohan <gharshitmohan@ymail.com>
Date: Sat, 6 Jul 2024 13:00:09 +0530
Subject: [PATCH] Add `useUpdateEffect` hook to fix collection search (#944)

---
 src/hooks/useUpdateEffect.ts        | 18 ++++++++++++++++++
 src/pages/collection/Collection.tsx |  5 ++---
 2 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useUpdateEffect.ts

diff --git a/src/hooks/useUpdateEffect.ts b/src/hooks/useUpdateEffect.ts
new file mode 100644
index 000000000..b46904d2c
--- /dev/null
+++ b/src/hooks/useUpdateEffect.ts
@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+import type { DependencyList, EffectCallback } from 'react';
+
+const useUpdateEffect = (effect: EffectCallback, dependencies: DependencyList) => {
+  const isInitialMount = useRef(true);
+
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      return effect();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+};
+
+export default useUpdateEffect;
diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx
index 7ae75dcc9..72e29e3c4 100644
--- a/src/pages/collection/Collection.tsx
+++ b/src/pages/collection/Collection.tsx
@@ -26,6 +26,7 @@ import { useSettingsQuery } from '@/core/react-query/settings/queries';
 import { useGroupViewQuery } from '@/core/react-query/webui/queries';
 import useEventCallback from '@/hooks/useEventCallback';
 import useFlattenListResult from '@/hooks/useFlattenListResult';
+import useUpdateEffect from '@/hooks/useUpdateEffect';
 
 import type { RootState } from '@/core/store';
 import type { FilterCondition, FilterType, SortingCriteria } from '@/core/types/api/filter';
@@ -109,10 +110,8 @@ function Collection() {
     setMode(viewSetting);
   }, [viewSetting]);
 
-  useEffect(() => {
+  useUpdateEffect(() => {
     setSearch('');
-    // Shouldn't be emptied on every render
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- for setSearch
   }, [isSeries]);
 
   const groupFilterCondition = useMemo(() => {