✨ feat(useUpdateLayoutEffect): add useUpdateLayoutEffect hooks

Author: wangxingkang

src/index.ts

@@ -11,6 +11,7 @@ import { useTimeout } from './useTimeout';
 import { useToggle } from './useToggle';
 import { useUnmount } from './useUnmount';
 import { useUpdateEffect } from './useUpdateEffect';
+import { useUpdateLayoutEffect } from './useUpdateLayoutEffect';
 
 export {
   useBoolean,
@@ -24,7 +25,8 @@ export {
   useTimeout,
   useToggle,
   useUnmount,
-  useUpdateEffect
+  useUpdateEffect,
+  useUpdateLayoutEffect
 };
 
 export default {
@@ -39,5 +41,6 @@ export default {
   useTimeout,
   useToggle,
   useUnmount,
-  useUpdateEffect
+  useUpdateEffect,
+  useUpdateLayoutEffect
 };

src/useUpdateLayoutEffect/__demo__/demo01.tsx

@@ -0,0 +1,36 @@
+/**
+ * title: 基础用法
+ */
+
+import React, { useLayoutEffect, useState } from 'react';
+import { Button } from 'antd';
+import { useUpdateLayoutEffect } from '@pansy/react-hooks';
+
+export default () => {
+  const [count, setCount] = useState(0);
+  const [layoutEffectCount, setLayoutEffectCount] = useState(0);
+  const [updateLayoutEffectCount, setUpdateLayoutEffectCount] = useState(0);
+
+  useLayoutEffect(() => {
+    setLayoutEffectCount((c) => c + 1);
+  }, [count]);
+
+  useUpdateLayoutEffect(() => {
+    setUpdateLayoutEffectCount((c) => c + 1);
+    return () => {
+      // do something
+    };
+  }, [count]); // you can include deps array if necessary
+
+  return (
+    <div>
+      <p>layoutEffectCount: {layoutEffectCount}</p>
+      <p>updateLayoutEffectCount: {updateLayoutEffectCount}</p>
+      <p>
+        <Button onClick={() => setCount((c) => c + 1)}>
+          reRender
+        </Button>
+      </p>
+    </div>
+  );
+};

src/useUpdateLayoutEffect/__tests__/index.test.ts

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

src/useUpdateLayoutEffect/index.md

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

src/useUpdateLayoutEffect/index.ts

@@ -0,0 +1,4 @@
+import { useLayoutEffect } from 'react';
+import { createUpdateEffect } from '../utils/createUpdateEffect';
+
+export const useUpdateLayoutEffect = createUpdateEffect(useLayoutEffect);