perf(shared/useWatch): 优化 useWatch，从异步回调改为同步

js-tool-pack · Aug 14, 2023 · 2ebaffa · 2ebaffa
1 parent 5a06218
commit 2ebaffa
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/packages/shared/src/hooks/tests/useWatch.test.ts b/packages/shared/src/hooks/tests/useWatch.test.ts
@@ -6,7 +6,9 @@ import { sleep } from '@tool-pack/basic';
 describe('useWatch', () => {
   test('common', async () => {
     let no: (number | void)[] = [];
+    let renderTimes = 0;
     const { result } = renderHook(() => {
+      renderTimes++;
       const [state, setState] = useState(1);
       useWatch(state, (newVal, oldVal) => {
         times++;
@@ -30,6 +32,8 @@ describe('useWatch', () => {
     expect(result.current[0]).toBe(3);
     expect(times).toBe(2);
     expect(no).toEqual([3, 2]);
+
+    expect(renderTimes).toBe(3);
   });
   test('immediate', async () => {
     let times = 0;

diff --git a/packages/shared/src/hooks/useWatch.ts b/packages/shared/src/hooks/useWatch.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 
 export function useWatch<T>(
   value: T,
@@ -9,15 +9,14 @@ export function useWatch<T>(
   const isInitRef = useRef(true);
   const canceledRef = useRef(false);
 
-  useEffect(() => {
-    if (canceledRef.current) return;
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  if (canceledRef.current) return () => {};
 
-    const oldVal = oldValRef.current;
-    if (value === oldVal) return;
-
-    oldValRef.current = value;
+  const oldVal = oldValRef.current;
+  oldValRef.current = value;
+  if (oldVal !== value) {
     cb(value, oldVal);
-  }, [cb, value]);
+  }
 
   // immediate
   if (immediate && isInitRef.current) cb(value);