feat(shared/hooks): 新增 useFollowingRef hook

Author: mengxinssfd

packages/shared/src/hooks/__tests__/useFollowingRef.test.ts

@@ -0,0 +1,23 @@
+import { renderHook, act } from '@testing-library/react';
+import { useFollowingRef } from '@pkg/shared';
+import { useState } from 'react';
+
+describe('useFollowingRef', () => {
+  test('base', () => {
+    let times = 0;
+    const hook = renderHook(() => {
+      const [state, setState] = useState(1);
+      const followingStateRef = useFollowingRef(state, (v) => v * 2);
+      times++;
+      return [followingStateRef, setState] as const;
+    });
+    const [value, setValue] = hook.result.current;
+
+    expect(value.current).toBe(2);
+    expect(times).toBe(1);
+
+    act(() => setValue(3));
+    expect(value.current).toBe(6);
+    expect(times).toBe(2);
+  });
+});

packages/shared/src/hooks/index.ts

@@ -22,3 +22,4 @@ export * from './useFollowingState';
 export * from './useOnlineStatus';
 export * from './useOldValue';
 export * from './useChildrenWithRefs';
+export * from './useFollowingRef';

packages/shared/src/hooks/useFollowingRef.ts

@@ -0,0 +1,16 @@
+import { type MutableRefObject, useRef } from 'react';
+import { useWatch } from './useWatch';
+
+/**
+ * 跟随外部状态的内部状态ref
+ */
+
+export function useFollowingRef<T, R>(
+  state: T,
+  stateHandler?: (state: T) => R,
+): MutableRefObject<R> {
+  const cb = stateHandler || ((v) => v);
+  const ref = useRef(cb(state));
+  useWatch(state, (n) => (ref.current = cb(n)));
+  return ref as MutableRefObject<R>;
+}