Merge pull request alibaba#799 from atzcl/master

fix: when uninstalling component，cancel update effect
yejiajiehz · Dec 26, 2020 · 8a073cd · 8a073cd
2 parents 339856c + 187bd4b
commit 8a073cd
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 8 deletions.
diff --git a/packages/hooks/src/useDebounceEffect/__tests__/index.test.ts b/packages/hooks/src/useDebounceEffect/__tests__/index.test.ts
@@ -54,4 +54,40 @@ describe('useDebounceEffect', () => {
       expect(mockCleanUp.mock.calls.length).toEqual(1);
     });
   });
+
+  it('should cancel timeout on unmount', async () => {
+    const mockEffect = jest.fn(() => {});
+    const mockCleanUp = jest.fn(() => {});
+
+    const hook = renderHook(
+      (props) =>
+        useDebounceEffect(
+          () => {
+            mockEffect();
+            return () => {
+              mockCleanUp();
+            };
+          },
+          [props],
+          { wait: 200 },
+        ),
+      { initialProps: 0 },
+    );
+
+    await act(async () => {
+      expect(mockEffect.mock.calls.length).toEqual(0);
+      expect(mockCleanUp.mock.calls.length).toEqual(0);
+
+      hook.rerender(1);
+      await sleep(50);
+      expect(mockEffect.mock.calls.length).toEqual(0);
+      expect(mockCleanUp.mock.calls.length).toEqual(0);
+
+      await sleep(300);
+      hook.unmount();
+
+      expect(mockEffect.mock.calls.length).toEqual(1);
+      expect(mockCleanUp.mock.calls.length).toEqual(1);
+    });
+  });
 });
diff --git a/packages/hooks/src/useDebounceEffect/index.ts b/packages/hooks/src/useDebounceEffect/index.ts
@@ -2,6 +2,7 @@ import { useEffect, EffectCallback, DependencyList, useState } from 'react';
 import { DebounceOptions } from '../useDebounce/debounceOptions';
 import useDebounceFn from '../useDebounceFn';
 import useUpdateEffect from '../useUpdateEffect';
+import useUnmount from '../useUnmount';
 
 function useDebounceEffect(
   effect: EffectCallback,
@@ -10,14 +11,16 @@ function useDebounceEffect(
 ) {
   const [flag, setFlag] = useState({});
 
-  const { run } = useDebounceFn(() => {
+  const { run, cancel } = useDebounceFn(() => {
     setFlag({});
   }, options);
 
   useEffect(() => {
     return run();
   }, deps);
 
+  useUnmount(cancel);
+
   useUpdateEffect(effect, [flag]);
 }
 

diff --git a/packages/hooks/src/useThrottleEffect/__tests__/index.test.ts b/packages/hooks/src/useThrottleEffect/__tests__/index.test.ts
@@ -32,26 +32,57 @@ describe('useThrottleEffect', () => {
         ),
       );
     });
+
     await act(async () => {
       expect(mockEffect.mock.calls.length).toEqual(1);
       expect(mockCleanUp.mock.calls.length).toEqual(0);
+
       mountedState = 2;
       hook.rerender();
-      await sleep(50);
-      mountedState = 3;
-      hook.rerender();
-      expect(mockEffect.mock.calls.length).toEqual(1);
-      expect(mockCleanUp.mock.calls.length).toEqual(0);
       await sleep(300);
       expect(mockEffect.mock.calls.length).toEqual(2);
       expect(mockCleanUp.mock.calls.length).toEqual(1);
-      mountedState = 4;
+
+      mountedState = 3;
       hook.rerender();
       expect(mockEffect.mock.calls.length).toEqual(2);
       expect(mockCleanUp.mock.calls.length).toEqual(1);
+
       await sleep(300);
       expect(mockEffect.mock.calls.length).toEqual(3);
       expect(mockCleanUp.mock.calls.length).toEqual(2);
     });
   });
+
+  it('should cancel timeout on unmount', async () => {
+    const mockEffect = jest.fn(() => {});
+    const mockCleanUp = jest.fn(() => {});
+
+    const hook = renderHook(
+      (props) =>
+        useThrottleEffect(
+          () => {
+            mockEffect();
+            return () => {
+              mockCleanUp();
+            };
+          },
+          [props],
+          { wait: 200 },
+        ),
+      { initialProps: 0 },
+    );
+
+    await act(async () => {
+      expect(mockEffect.mock.calls.length).toEqual(1);
+      expect(mockCleanUp.mock.calls.length).toEqual(0);
+
+      hook.rerender(1);
+      await sleep(50);
+      hook.unmount();
+
+      expect(mockEffect.mock.calls.length).toEqual(1);
+      expect(mockCleanUp.mock.calls.length).toEqual(1);
+    });
+  });
 });
diff --git a/packages/hooks/src/useThrottleEffect/index.ts b/packages/hooks/src/useThrottleEffect/index.ts
@@ -2,6 +2,7 @@ import { useEffect, EffectCallback, DependencyList, useState } from 'react';
 import { ThrottleOptions } from '../useThrottle/throttleOptions';
 import useThrottleFn from '../useThrottleFn';
 import useUpdateEffect from '../useUpdateEffect';
+import useUnmount from '../useUnmount';
 
 function useThrottleEffect(
   effect: EffectCallback,
@@ -10,14 +11,16 @@ function useThrottleEffect(
 ) {
   const [flag, setFlag] = useState({});
 
-  const { run } = useThrottleFn(() => {
+  const { run, cancel } = useThrottleFn(() => {
     setFlag({});
   }, options);
 
   useEffect(() => {
     return run();
   }, deps);
 
+  useUnmount(cancel);
+
   useUpdateEffect(effect, [flag]);
 }