feat: add useProState hook

config/hooks.ts

@@ -0,0 +1,122 @@
+export const menus = [
+  {
+    title: 'useRequest',
+    children: [
+      'useRequest/doc/index',
+      'useRequest/doc/basic',
+      'useRequest/doc/loadingDelay',
+      'useRequest/doc/polling',
+      'useRequest/doc/ready',
+      'useRequest/doc/refreshDeps',
+      'useRequest/doc/refreshOnWindowFocus',
+      'useRequest/doc/debounce',
+      'useRequest/doc/throttle',
+      'useRequest/doc/cache',
+      'useRequest/doc/retry',
+    ],
+  },
+  {
+    title: 'Scene',
+    children: [
+      'useAntdTable',
+      'useFusionTable',
+      'useInfiniteScroll',
+      'usePagination',
+      'useDynamicList',
+      'useVirtualList',
+      'useHistoryTravel',
+      'useNetwork',
+      'useSelections',
+      'useCountDown',
+      'useCounter',
+      'useTextSelection',
+      'useWebSocket',
+    ],
+  },
+  {
+    title: 'LifeCycle',
+    children: ['useMount', 'useUnmount', 'useUnmountedRef'],
+  },
+  {
+    title: 'State',
+    children: [
+      'useProState',
+      'useSetState',
+      'useBoolean',
+      'useToggle',
+      'use-url-state',
+      'useCookieState',
+      'useLocalStorageState',
+      'useSessionStorageState',
+      'useDebounce',
+      'useThrottle',
+      'useMap',
+      'useSet',
+      'usePrevious',
+      'useRafState',
+      'useSafeState',
+      'useGetState',
+      'useResetState',
+    ],
+  },
+  {
+    title: 'Effect',
+    children: [
+      'useUpdateEffect',
+      'useUpdateLayoutEffect',
+      'useAsyncEffect',
+      'useDebounceEffect',
+      'useDebounceFn',
+      'useThrottleFn',
+      'useThrottleEffect',
+      'useDeepCompareEffect',
+      'useDeepCompareLayoutEffect',
+      'useInterval',
+      'useRafInterval',
+      'useTimeout',
+      'useRafTimeout',
+      'useLockFn',
+      'useUpdate',
+    ],
+  },
+  {
+    title: 'Dom',
+    children: [
+      'useEventListener',
+      'useClickAway',
+      'useDocumentVisibility',
+      'useDrop',
+      'useEventTarget',
+      'useExternal',
+      'useTitle',
+      'useFavicon',
+      'useFullscreen',
+      'useHover',
+      'useMutationObserver',
+      'useInViewport',
+      'useKeyPress',
+      'useLongPress',
+      'useMouse',
+      'useResponsive',
+      'useScroll',
+      'useSize',
+      'useFocusWithin',
+    ],
+  },
+  {
+    title: 'Advanced',
+    children: [
+      'useControllableValue',
+      'useCreation',
+      'useEventEmitter',
+      'useIsomorphicLayoutEffect',
+      'useLatest',
+      'useMemoizedFn',
+      'useReactive',
+    ],
+  },
+  {
+    title: 'Dev',
+    children: ['useTrackedEffect', 'useWhyDidYouUpdate'],
+  },
+];

packages/hooks/src/useExternal/index.ts

@@ -27,12 +27,14 @@ const EXTERNAL_USED_COUNT: Record<string, number> = {};
 
 export type Status = 'unset' | 'loading' | 'ready' | 'error';
 
-interface loadResult {
+interface LoadResult {
   ref: Element;
   status: Status;
 }
 
-const loadScript = (path: string, props = {}): loadResult => {
+type LoadExternal = <T>(path: string, props?: Partial<T>) => LoadResult;
+
+const loadScript: LoadExternal = (path, props = {}) => {
   const script = document.querySelector(`script[src="${path}"]`);
 
   if (!script) {
@@ -58,7 +60,7 @@ const loadScript = (path: string, props = {}): loadResult => {
   };
 };
 
-const loadCss = (path: string, props = {}): loadResult => {
+const loadCss: LoadExternal = (path, props = {}) => {
   const css = document.querySelector(`link[href="${path}"]`);
   if (!css) {
     const newCss = document.createElement('link');

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

@@ -0,0 +1,90 @@
+import { renderHook, act } from '@testing-library/react';
+import useProState from '../index';
+
+describe('useProState', () => {
+  const setUp = <T>(initialValue: T) =>
+    renderHook(() => {
+      const [state, { setState, getState, resetState, setMergeState }] =
+        useProState<T>(initialValue);
+      return {
+        state,
+        setState,
+        getState,
+        resetState,
+        setMergeState,
+      } as const;
+    });
+
+  it('should support initialValue', () => {
+    const hook = setUp(0);
+    expect(hook.result.current.state).toBe(0);
+  });
+
+  it('should support function initialValue', () => {
+    const hook = setUp(() => 0);
+    expect(hook.result.current.state).toBe(0);
+  });
+
+  it('should support update', () => {
+    const hook = setUp(0);
+    act(() => {
+      hook.result.current.setState(1);
+    });
+    expect(hook.result.current.state).toBe(1);
+  });
+
+  it('should support function update', () => {
+    const hook = setUp(0);
+    act(() => {
+      hook.result.current.setState((prev) => prev + 1);
+    });
+    expect(hook.result.current.state).toBe(1);
+  });
+
+  it('should support get latest value', () => {
+    const hook = setUp(0);
+    act(() => {
+      hook.result.current.setState(1);
+    });
+    expect(hook.result.current.getState()).toBe(1);
+  });
+
+  it('should support frozen', () => {
+    const hook = setUp(0);
+    const prevGetState = hook.result.current.getState;
+    act(() => {
+      hook.result.current.setState(1);
+    });
+    expect(hook.result.current.getState).toBe(prevGetState);
+  });
+
+  it('should keep random initialValue', () => {
+    const random = Math.random();
+    const hook = setUp(random);
+    act(() => {
+      hook.result.current.setState(Math.random());
+      hook.result.current.resetState();
+    });
+    expect(hook.result.current.state).toBe(random);
+  });
+
+  it('should keep random function initialValue', () => {
+    const random = Math.random();
+    const hook = setUp(() => random);
+    act(() => {
+      hook.result.current.setState(() => Math.random());
+      hook.result.current.resetState();
+    });
+    expect(hook.result.current.state).toBe(random);
+  });
+
+  it('should support setMergeState', () => {
+    const hook = setUp<{ hello?: string; foo?: string }>({
+      hello: 'world',
+    });
+    act(() => {
+      hook.result.current.setMergeState({ foo: 'bar' });
+    });
+    expect(hook.result.current.state).toEqual({ hello: 'world', foo: 'bar' });
+  });
+});

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

@@ -0,0 +1,26 @@
+/**
+ * title: Open console to view logs
+ * desc: The counter prints the value every 3 seconds
+ *
+ * title.zh-CN: 打开控制台查看输出
+ * desc.zh-CN: 计数器每 3 秒打印一次值
+ */
+
+import React, { useEffect } from 'react';
+import { useProState } from 'ahooks';
+
+export default () => {
+  const [state, { setState, getState }] = useProState<number>(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      console.log('interval count', getState());
+    }, 3000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return <button onClick={() => setState((count) => count + 1)}>count: {state}</button>;
+};

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

@@ -0,0 +1,44 @@
+/**
+ * title: Friendly reminder
+ * desc: SetMergeState will automatically merge objects. The usage of setState is consistent with useState in hook.
+ *
+ * title.zh-CN: 温馨提示
+ * desc.zh-CN: setMergeState会自动合并对象，setState和hook中useState的用法一致。
+ */
+
+import React from 'react';
+import { useProState } from 'ahooks';
+
+interface State {
+  hello: string;
+  value: number;
+  [key: string]: any;
+}
+
+export default () => {
+  const [state, { setState, resetState, setMergeState }] = useProState<State>({
+    hello: '',
+    value: Math.random(),
+  });
+
+  return (
+    <div>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+      <p>
+        <button type="button" onClick={() => setState({ hello: 'world', value: Math.random() })}>
+          set hello and value
+        </button>
+        <button
+          type="button"
+          onClick={() => setMergeState({ foo: 'bar' })}
+          style={{ margin: '0 8px' }}
+        >
+          setMergeState foo
+        </button>
+        <button type="button" onClick={resetState}>
+          resetState
+        </button>
+      </p>
+    </div>
+  );
+};

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

@@ -0,0 +1,65 @@
+---
+nav:
+  path: /hooks
+---
+
+# useSetState
+
+The hook that manage state, providing the ability to set, get the latest value, reset, and merge.
+
+## Examples
+
+### Get the latest value
+
+<code src="./demo/demo1.tsx" />
+
+### Merge and reset
+
+<code src="./demo/demo2.tsx" />
+
+## API
+
+```typescript
+export type SetMergeState<S extends Record<string, any>> = <K extends keyof S>(
+  state: Pick<S, K> | null | ((prevState: Readonly<S>) => Pick<S, K> | S | null),
+) => void;
+export type DispatchType<S> = Dispatch<SetStateAction<S>>;
+
+function useProState<S extends Record<string, any>>(
+  initialState?: S | (() => S),
+): [
+  S,
+  {
+    setState: DispatchType<S>;
+    getState: () => S;
+    resetState: () => void;
+    setMergeState: SetMergeState<S>;
+  },
+];
+
+function useProState<S>(initialState?: S | (() => S)): [
+  S,
+  {
+    setState: DispatchType<S>;
+    getState: () => S;
+    resetState: () => void;
+    setMergeState: (s: Record<string, any>) => void;
+  },
+];
+```
+
+### Result
+
+| Property      | Description          | Type                                                   | Default |
+| ------------- | -------------------- | ------------------------------------------------------ | ------- |
+| state         | Current state        | `S`                                                    | -       |
+| setState      | Set state            | `DispatchType<S>`                                      | -       |
+| getState      | Get the latest value | `() => S`                                              | -       |
+| resetState    | reset state          | `() => void`                                           | -       |
+| setMergeState | merge state          | `SetMergeState<S> ｜ (s: Record<string, any>) => void` | -       |
+
+### Params
+
+| Property     | Description   | Type           | Default |
+| ------------ | ------------- | -------------- | ------- |
+| initialState | Initial state | `T \| () => T` | -       |