refactor: usePrevious

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

@@ -1,17 +1,17 @@
 import { renderHook } from '@testing-library/react-hooks';
-import usePrevious, { compareFunction as comFunc } from '../';
+import usePrevious, { ShouldUpdateFunc } from '../';
 
 describe('usePrevious', () => {
   it('should be defined', () => {
     expect(usePrevious).toBeDefined();
   });
 
-  function getHook<T>(initialValue?: T, compareFunction?: comFunc<T>) {
+  function getHook<T>(initialValue?: T, compareFunction?: ShouldUpdateFunc<T>) {
     return renderHook(({ val, cmp }) => usePrevious<T>(val as T, cmp), {
       initialProps: {
         val: initialValue || 0,
         cmp: compareFunction,
-      } as { val?: T; cmp?: comFunc<T> },
+      } as { val?: T; cmp?: ShouldUpdateFunc<T> },
     });
   }
 

packages/hooks/src/usePrevious/demo/demo2.tsx

@@ -1,9 +1,9 @@
 /**
- * title: Using compare function
- * desc: The stored previous value update only when the compare function returns true.
+ * title: Custom shouldUpadte function
+ * desc: The stored previous value update only when the shouldUpadte function returns true.
  *
- * title.zh-CN: 使用 compare function
- * desc.zh-CN: 只有 compare function 返回 true 时，才会记录值的变化
+ * title.zh-CN: 自定义 shouldUpadte function
+ * desc.zh-CN: 只有 shouldUpadte function 返回 true 时，才会记录值的变化。
  */
 
 import React, { useState } from 'react';

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

@@ -10,16 +10,17 @@ group:
 
 # usePrevious
 
-A Hook to store the previous value.
+<Tag lang="en-US" tags="ssr&crossPlatform"></Tag>
 
+A Hook to store the previous value.
 
 ## Examples
 
 ### Default usage
 
 <code src="./demo/demo1.tsx" />
 
-### Using compare function
+### Custom shouldUpadte function
 
 <code src="./demo/demo2.tsx" />
 
@@ -28,19 +29,19 @@ A Hook to store the previous value.
 ```typescript
 const previousState: T = usePrevious<T>(
   state: T,
-  compareFunction: (prev: T | undefined, next: T) => boolean
+  shouldUpdate?: (prev: T | undefined, next: T) => boolean
 );
 ```
 
 ### Result
 
-| Property      | Description        | Type |
-|---------------|--------------------|------|
-| previousState | the previous value | -    |
+| Property      | Description        | Type  |
+|---------------|--------------------|-------|
+| previousState | The previous value | `any` |
 
 ### Params
 
-| Property        | Description                                                   | Type | Default |
-|-----------------|---------------------------------------------------------------|------|---------|
-| state           | the state need to be tracked                                  | -    | -       |
-| compareFunction | optional, customize when the previous value need to be stored |  (prev: T \| undefined, next: T) => boolean    | -       |
+| Property     | Description                                                   | Type                                         | Default             |
+|--------------|---------------------------------------------------------------|----------------------------------------------|---------------------|
+| state        | The state need to be tracked                                  | `any`                                        | -                   |
+| shouldUpdate | Optional, customize when the previous value need to be stored | `(prev: T \| undefined, next: T) => boolean` | `(a, b) => a !== b` |

packages/hooks/src/usePrevious/index.ts

@@ -1,13 +1,17 @@
 import { useRef } from 'react';
 
-export type compareFunction<T> = (prev: T | undefined, next: T) => boolean;
+export type ShouldUpdateFunc<T> = (prev: T | undefined, next: T) => boolean;
 
-function usePrevious<T>(state: T, compare?: compareFunction<T>): T | undefined {
+const defaultShouldUpdate = <T>(a?: T, b?: T) => a !== b;
+
+function usePrevious<T>(
+  state: T,
+  shouldUpdate: ShouldUpdateFunc<T> = defaultShouldUpdate,
+): T | undefined {
   const prevRef = useRef<T>();
   const curRef = useRef<T>();
 
-  const needUpdate = typeof compare === 'function' ? compare(curRef.current, state) : true;
-  if (needUpdate) {
+  if (shouldUpdate(curRef.current, state)) {
     prevRef.current = curRef.current;
     curRef.current = state;
   }

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

@@ -10,16 +10,17 @@ group:
 
 # usePrevious
 
-保存上一次渲染时状态的 Hook。
+<Tag lang="zh-CN" tags="ssr&crossPlatform"></Tag>
 
+保存上一次状态的 Hook。
 
 ## 代码演示
 
 ### 基础用法
 
 <code src="./demo/demo1.tsx" />
 
-### 使用 compare function
+### 自定义 shouldUpadte function
 
 <code src="./demo/demo2.tsx" />
 
@@ -28,19 +29,19 @@ group:
 ```typescript
 const previousState: T = usePrevious<T>(
   state: T,
-  compareFunction: (prev: T | undefined, next: T) => boolean
+  shouldUpdate?: (prev: T | undefined, next: T) => boolean
 );
 ```
 
 ### Result
 
-| 参数          | 说明            | 类型 |
-|---------------|-----------------|------|
-| previousState | 上次 state 的值 | -    |
+| 参数          | 说明            | 类型  |
+|---------------|-----------------|-------|
+| previousState | 上次 state 的值 | `any` |
 
 ### Params
 
-| 参数            | 说明                     | 类型 | 默认值 |
-|-----------------|--------------------------|------|--------|
-| state           | 需要记录变化的值         | -    | -      |
-| compareFunction | 可选，自定义值变化的规则 |   (prev: T \| undefined, next: T) => boolean   | -      |
+| 参数         | 说明                       | 类型                                         | 默认值              |
+|--------------|----------------------------|----------------------------------------------|---------------------|
+| state        | 需要记录变化的值           | `any`                                        | -                   |
+| shouldUpdate | 可选，自定义判断值是否变化 | `(prev: T \| undefined, next: T) => boolean` | `(a, b) => a !== b` |