refactor: useUpdateEffect

package.json

@@ -29,7 +29,6 @@
     "pub:doc": "now --prod"
   },
   "dependencies": {
-    "react-use": "^10.6.2",
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {

src/index.ts

@@ -10,6 +10,7 @@ import useVirtualList from './useVirtualList';
 import { configResponsive, useResponsive } from './useResponsive';
 import useSize from './useSize';
 import useLocalStorageState from './useLocalStorageState';
+import useUpdateEffect from './useUpdateEffect';
 
 export {
   useAntdTable,
@@ -26,4 +27,5 @@ export {
   useSize,
   configResponsive,
   configRequest,
+  useUpdateEffect,
 };

src/useAntdTable/index.ts

@@ -1,7 +1,7 @@
 import { WrappedFormUtils } from 'antd/lib/form/Form';
 import { PaginationConfig } from 'antd/lib/pagination';
 import { DependencyList, useEffect, useReducer, useRef, useCallback } from 'react';
-import { useUpdateEffect } from 'react-use';
+import useUpdateEffect from '../useUpdateEffect';
 import useAsync from '../useAsync';
 
 interface UseAntdTableFormUtils extends WrappedFormUtils {

src/useAsync/index.ts

@@ -221,12 +221,12 @@ export default function useAsync<Result = any>(
   }, []);
 
   useEffect(
-    (...args: any[]) => {
+    () => {
       if (options.pollingInterval) {
         intervalAsync();
       } else if (!options.manual) {
-        // 直接值行
-        run(...(args || []));
+        // 直接执行
+        run();
       }
 
       return () => {

src/useControlledValue/index.ts

@@ -1,5 +1,5 @@
 import { useMemo, useState, useCallback } from 'react';
-import { useUpdateEffect } from 'react-use';
+import useUpdateEffect from '../useUpdateEffect';
 
 export interface Options {
   defaultValuePropName?: string;

src/useLoadMore/index.ts

@@ -1,5 +1,5 @@
 import { DependencyList, RefObject, useEffect, useState, useCallback, useRef } from 'react';
-import { useUpdateEffect } from 'react-use';
+import useUpdateEffect from '../useUpdateEffect';
 import useAsync from '../useAsync';
 
 export interface ReturnValue<Item> {

src/useSearch/index.ts

@@ -1,5 +1,5 @@
 import { DependencyList, useState, useMemo, useRef, useCallback } from 'react';
-import { useUpdateEffect } from 'react-use';
+import useUpdateEffect from '../useUpdateEffect';
 
 import useAsync from '../useAsync';
 

src/useSize/__test__/index.test.ts

@@ -2,7 +2,7 @@ import { renderHook, act } from '@testing-library/react-hooks';
 import useSize from '../index';
 
 // test about Resize Observer see https://github.com/que-etc/resize-observer-polyfill/tree/master/tests
-describe('useSearch', () => {
+describe('useSize', () => {
   it('should be defined', () => {
     expect(useSize).toBeDefined();
   });

src/useUpdateEffect/__test__/index.test.ts

@@ -0,0 +1,31 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useUpdateEffect from '../index';
+
+describe('useUpdateEffect', () => {
+  it('should be defined', () => {
+    expect(useUpdateEffect).toBeDefined();
+  });
+  it('test on mounted', async () => {
+    let mountedState = 1;
+    const hook = renderHook(() =>
+      useUpdateEffect(() => {
+        mountedState = 2;
+      }),
+    );
+    expect(mountedState).toEqual(1);
+    hook.rerender();
+    expect(mountedState).toEqual(2);
+  });
+  it('test on optional', () => {
+    let mountedState = 1;
+    const hook = renderHook(() =>
+      useUpdateEffect(() => {
+        mountedState = 3;
+      }, [mountedState]),
+    );
+    expect(mountedState).toEqual(1);
+    mountedState = 2;
+    hook.rerender();
+    expect(mountedState).toEqual(3);
+  });
+});

src/useUpdateEffect/index.mdx

@@ -0,0 +1,71 @@
+---
+name: useUpdateEffect
+route: /useUpdateEffect
+menu: '基础 hooks'
+edit: false
+sidebar: true
+---
+
+import { Playground } from 'docz';
+import useUpdateEffect from './index';
+
+# useUpdateEffect
+
+一个作用于组件 didMount 阶段以后的 useEffect hook。
+
+## 代码演示
+
+> 使用上和 useEffect 一模一样，只是生命周期放在了组件 didMount 之后。
+
+<Playground>
+{
+  () => {
+    function Demo() {
+      const [count, setCount] = React.useState(0);
+
+      React.useEffect(() => {
+        const time = setTimeout(() => {
+          setCount(count => count + 1)
+        }, 1000)
+
+        return () => {
+          clearTimeout(time)
+        }
+      })
+
+      useUpdateEffect(() => {
+        // you can look console count 1 and beyond
+        console.log(`count: ${count}`)
+
+        return () => {
+          // do something
+        }
+      }) // you can include deps array if necessary
+
+      return (
+        <div>
+          <p>请打开控制台查看：</p>
+          Count: {count}
+        </div>
+      )
+    }
+    return <Demo />
+  }
+}
+</Playground>
+
+## API
+
+```js
+useUpdateEffect(
+  effect: () => void,
+  deps?: deps,
+)
+```
+
+### 参数
+
+| 参数    | 说明                                         | 类型                   | 默认值 |
+|---------|----------------------------------------------|------------------------|--------|
+| effect | 可执行函数  | Function | -      |
+| deps | 可选项，传入依赖变化的对象  | array | array \| undefined | -      |

src/useUpdateEffect/index.ts

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+
+const useUpdateEffect: typeof useEffect = (effect, deps) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+    } else {
+      return effect();
+    }
+  }, deps);
+};
+
+export default useUpdateEffect;