From 74c7020e3f60bd5a4fd17d8bd3377025979d9ba6 Mon Sep 17 00:00:00 2001
From: Damon Feng <245211612@qq.com>
Date: Tue, 12 Dec 2023 22:02:35 +0800
Subject: [PATCH 1/2] perf(useDebounceEffect): effectCallback called that do
 not rely on rerender

---
 packages/hooks/src/useDebounceEffect/index.ts | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/hooks/src/useDebounceEffect/index.ts b/packages/hooks/src/useDebounceEffect/index.ts
index 2866d91d98..cdb51c040c 100644
--- a/packages/hooks/src/useDebounceEffect/index.ts
+++ b/packages/hooks/src/useDebounceEffect/index.ts
@@ -1,25 +1,42 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import type { DependencyList, EffectCallback } from 'react';
 import type { DebounceOptions } from '../useDebounce/debounceOptions';
 import useDebounceFn from '../useDebounceFn';
-import useUpdateEffect from '../useUpdateEffect';
+import { isFunction } from '../utils';
+import useUnmount from '../useUnmount';
+import isDev from '../utils/isDev';
 
 function useDebounceEffect(
   effect: EffectCallback,
   deps?: DependencyList,
   options?: DebounceOptions,
 ) {
-  const [flag, setFlag] = useState({});
+  if (isDev) {
+    if (!isFunction(effect)) {
+      console.error(
+        `useDebounceEffect expected first parameter is a function, got ${typeof effect}`,
+      );
+    }
+  }
+
+  const cleanup = useRef<ReturnType<EffectCallback>>();
 
   const { run } = useDebounceFn(() => {
-    setFlag({});
+    if (isFunction(cleanup.current)) {
+      cleanup.current();
+    }
+    cleanup.current = effect();
   }, options);
 
   useEffect(() => {
     return run();
   }, deps);
 
-  useUpdateEffect(effect, [flag]);
+  useUnmount(() => {
+    if (isFunction(cleanup.current)) {
+      cleanup.current();
+    }
+  });
 }
 
 export default useDebounceEffect;

From 77ceb50515856721b34de9c36f5ecccae419b94b Mon Sep 17 00:00:00 2001
From: Damon Feng <245211612@qq.com>
Date: Tue, 12 Dec 2023 22:02:56 +0800
Subject: [PATCH 2/2] perf(useThrottleEffect): effectCallback called that do
 not rely on rerender

---
 packages/hooks/src/useThrottleEffect/index.ts | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/hooks/src/useThrottleEffect/index.ts b/packages/hooks/src/useThrottleEffect/index.ts
index e0e52ba67d..c2e5acfcf2 100644
--- a/packages/hooks/src/useThrottleEffect/index.ts
+++ b/packages/hooks/src/useThrottleEffect/index.ts
@@ -1,25 +1,42 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import type { DependencyList, EffectCallback } from 'react';
 import type { ThrottleOptions } from '../useThrottle/throttleOptions';
 import useThrottleFn from '../useThrottleFn';
-import useUpdateEffect from '../useUpdateEffect';
+import isDev from '../utils/isDev';
+import { isFunction } from '../utils';
+import useUnmount from '../useUnmount';
 
 function useThrottleEffect(
   effect: EffectCallback,
   deps?: DependencyList,
   options?: ThrottleOptions,
 ) {
-  const [flag, setFlag] = useState({});
+  if (isDev) {
+    if (!isFunction(effect)) {
+      console.error(
+        `useThrottleEffect expected first parameter is a function, got ${typeof effect}`,
+      );
+    }
+  }
+
+  const cleanup = useRef<ReturnType<EffectCallback>>();
 
   const { run } = useThrottleFn(() => {
-    setFlag({});
+    if (isFunction(cleanup.current)) {
+      cleanup.current();
+    }
+    cleanup.current = effect();
   }, options);
 
   useEffect(() => {
     return run();
   }, deps);
 
-  useUpdateEffect(effect, [flag]);
+  useUnmount(() => {
+    if (isFunction(cleanup.current)) {
+      cleanup.current();
+    }
+  });
 }
 
 export default useThrottleEffect;