feat: add useRefState hooks

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

@@ -0,0 +1,24 @@
+import { renderHook, act } from '@testing-library/react';
+import useStateRef from '../index';
+
+describe('useRafState', () => {
+  it('should work', () => {
+    const mockRaf = jest
+      .spyOn(window, 'requestAnimationFrame')
+      .mockImplementation((cb: FrameRequestCallback) => {
+        cb(0);
+        return 0;
+      });
+    const { result } = renderHook(() => useStateRef(0));
+    const setStateRef = result.current[1];
+    expect(result.current[0]).toBe(0);
+    expect(result.current[2]()).toBe(0);
+
+    act(() => {
+      setStateRef(1);
+    });
+    expect(result.current[0]).toBe(1);
+    expect(result.current[2]()).toBe(1);
+    mockRaf.mockRestore();
+  });
+});

packages/hooks/src/useStateRef/demo/demo1.tsx

@@ -0,0 +1,30 @@
+/**
+ * title: Basic usage
+ * desc: useSize can receive ref as argument
+ *
+ * title.zh-CN: 基础用法
+ * desc.zh-CN: useSize 可以接收 ref 参数
+ */
+
+import React, { useEffect } from 'react';
+import { useStateRef } from 'ahooks';
+
+
+export default () => {
+  const [value, setValue, getValue] = useStateRef(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setValue('data loaded from server');
+    }, 5000);
+
+    setTimeout(() => {
+      console.log(getValue());
+    }, 6000);
+  }, []);
+
+  const text = value || 'Loading...';
+
+  return <div>{text}</div>;
+};
+

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

@@ -0,0 +1,19 @@
+---
+nav:
+  path: /hooks
+---
+
+# useStateRef
+To deal with the closure problem, there is an additional function to get the latest state on the basis of useState
+
+## Examples
+
+### Default usage
+
+<code src="./demo/demo1.tsx" />
+
+## API
+
+```typescript
+const [value, setValue, getValue] = useStateRef(false);
+```

packages/hooks/src/useStateRef/index.ts

@@ -0,0 +1,16 @@
+import { useRef, useState, useCallback } from "react";
+import { isFunction } from '../utils';
+
+export default function useStateRef<T>(value?: T) {
+  const [state, setState] = useState(value);
+  const stateRef = useRef(state);
+
+  const setStateRef = useCallback((patch: T | ((state?: T) => T)) => {
+    const newState = isFunction(patch) ? patch(stateRef.current) : patch;
+    stateRef.current = newState;
+    setState(newState);
+  }, [])
+
+  const getState = useCallback(() => stateRef.current, []);
+  return [state, setStateRef, getState] as const;
+}

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

@@ -0,0 +1,19 @@
+---
+nav:
+  path: /hooks
+---
+
+# useStateRef
+处理闭包问题，在useState的基础上多了一个获取最新state的函数
+
+## 代码演示
+
+### 基础用法
+
+<code src="./demo/demo1.tsx" />
+
+## API
+
+```typescript
+const [value, setValue, getValue] = useStateRef(false);
+```