✨ feat(useUpdateEffect): add useUpdateEffect hooks

Author: wangxingkang

src/index.ts

@@ -10,6 +10,7 @@ import { useSize } from './useSize';
 import { useTimeout } from './useTimeout';
 import { useToggle } from './useToggle';
 import { useUnmount } from './useUnmount';
+import { useUpdateEffect } from './useUpdateEffect';
 
 export {
   useBoolean,
@@ -22,7 +23,8 @@ export {
   useSize,
   useTimeout,
   useToggle,
-  useUnmount
+  useUnmount,
+  useUpdateEffect
 };
 
 export default {
@@ -36,5 +38,6 @@ export default {
   useSize,
   useTimeout,
   useToggle,
-  useUnmount
+  useUnmount,
+  useUpdateEffect
 };

src/useUpdateEffect/__demo__/demo01.tsx

@@ -0,0 +1,32 @@
+/**
+ * title: 基础用法
+ */
+ import React, { useEffect, useState } from 'react';
+ import { Button } from 'antd'
+ import { useUpdateEffect } from '@pansy/react-hooks';
+
+ export default () => {
+   const [count, setCount] = useState(0);
+   const [effectCount, setEffectCount] = useState(0);
+   const [updateEffectCount, setUpdateEffectCount] = useState(0);
+
+   useEffect(() => {
+     setEffectCount((c) => c + 1);
+   }, [count]);
+
+   useUpdateEffect(() => {
+     setUpdateEffectCount((c) => c + 1);
+   }, [count]);
+
+   return (
+     <div>
+       <p>effectCount: {effectCount}</p>
+       <p>updateEffectCount: {updateEffectCount}</p>
+       <p>
+         <Button onClick={() => setCount((c) => c + 1)}>
+           reRender
+         </Button>
+       </p>
+     </div>
+   );
+ };

src/useUpdateEffect/__tests__/index.dom.test.ts

@@ -0,0 +1,36 @@
+/* eslint-disable max-nested-callbacks */
+import { renderHook } 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);
+    hook.rerender();
+    expect(mountedState).toEqual(1);
+    mountedState = 2;
+    hook.rerender();
+    expect(mountedState).toEqual(3);
+  });
+});

src/useUpdateEffect/index.md

@@ -0,0 +1,30 @@
+---
+title: useUpdateEffect
+nav:
+  title: Hooks
+  path: /hooks
+group:
+  title: Effect
+  path: /effect
+---
+
+# useUpdateEffect
+
+`useUpdateEffect` 用法等同于 `useEffect`，但是会忽略首次执行，只在依赖更新时执行。
+
+## 代码演示
+
+### 基础用法
+
+<code src="./__demo__/demo01.tsx" />
+
+## API
+
+API 与 `React.useEffect` 完全一致。
+
+```typescript
+useUpdateEffect(
+  effect: React.EffectCallback,
+  deps?: React.DependencyList,
+)
+```

src/useUpdateEffect/index.ts

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+import { createUpdateEffect } from '../utils/createUpdateEffect';
+
+/**
+ * useUpdateEffect 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行
+ */
+export const useUpdateEffect = createUpdateEffect(useEffect);

src/utils/createUpdateEffect.ts

@@ -0,0 +1,24 @@
+import { useRef } from 'react';
+import type { useEffect, useLayoutEffect } from 'react';
+
+type effectHookType = typeof useEffect | typeof useLayoutEffect;
+
+export const createUpdateEffect: (hook: effectHookType) => effectHookType =
+  (hook) => (effect, deps) => {
+    const isMounted = useRef(false);
+
+    // for react-refresh
+    hook(() => {
+      return () => {
+        isMounted.current = false;
+      };
+    }, []);
+
+    hook(() => {
+      if (!isMounted.current) {
+        isMounted.current = true;
+      } else {
+        return effect();
+      }
+    }, deps);
+  };