feat: usemount support destructor

Author: iambimo24

packages/hooks/src/useMount/__tests__/index.test.ts

@@ -3,16 +3,22 @@ import useMount from '../index';
 
 describe('useMount', () => {
   it('test mount', async () => {
+    const destructor = jest.fn();
     const fn = jest.fn();
+    fn.mockReturnValue(destructor);
     const hook = renderHook(() => useMount(fn));
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(destructor).toHaveBeenCalledTimes(0);
     hook.rerender();
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(destructor).toHaveBeenCalledTimes(0);
     hook.unmount();
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(destructor).toHaveBeenCalledTimes(1);
 
     renderHook(() => useMount(fn)).unmount();
-    expect(fn).toBeCalledTimes(2);
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(destructor).toHaveBeenCalledTimes(2);
   });
 
   // it('should output error when fn is not a function', () => {

packages/hooks/src/useMount/demo/demo1.tsx

@@ -13,6 +13,10 @@ import React from 'react';
 const MyComponent = () => {
   useMount(() => {
     message.info('mount');
+
+    return () => {
+      message.info('unmount');
+    };
   });
 
   return <div>Hello World</div>;
@@ -23,7 +27,7 @@ export default () => {
 
   return (
     <>
-      <button type="button" onClick={toggle}>
+      <button type='button' onClick={toggle}>
         {state ? 'unmount' : 'mount'}
       </button>
       {state && <MyComponent />}

packages/hooks/src/useMount/index.en-US.md

@@ -16,11 +16,11 @@ A hook that executes a function after the component is mounted.
 ## API
 
 ```typescript
-useMount(fn: () => void);
+useMount(fn: EffectCallback);
 ```
 
 ### Params
 
 | Property | Description                 | Type         | Default |
 | -------- | --------------------------- | ------------ | ------- |
-| fn       | The function to be executed | `() => void` | -       |
+| fn       | The function to be executed | `EffectCallback` | -       |

packages/hooks/src/useMount/index.ts

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
+import { type EffectCallback } from 'react';
 import { isFunction } from '../utils';
 import isDev from '../utils/isDev';
 
-const useMount = (fn: () => void) => {
+const useMount = (fn: EffectCallback) => {
   if (isDev) {
     if (!isFunction(fn)) {
       console.error(
@@ -12,7 +13,7 @@ const useMount = (fn: () => void) => {
   }
 
   useEffect(() => {
-    fn?.();
+    return fn?.();
   }, []);
 };
 

packages/hooks/src/useMount/index.zh-CN.md

@@ -16,11 +16,11 @@ nav:
 ## API
 
 ```typescript
-useMount(fn: () => void);
+useMount(fn: EffectCallback);
 ```
 
 ### 参数
 
 | 参数 | 说明               | 类型         | 默认值 |
 | ---- | ------------------ | ------------ | ------ |
-| fn   | 初始化时执行的函数 | `() => void` | -      |
+| fn   | 初始化时执行的函数 | `EffectCallback` | -      |