feat: add useResetState

config/hooks.ts

@@ -22,6 +22,7 @@ export const menus = [
       { title: 'useBoolean', link: '/hooks/use-boolean' },
       { title: 'useCounter', link: '/hooks/use-counter' },
       { title: 'useDebounce', link: '/hooks/use-debounce' },
+      { title: 'useResetState', link: '/hooks/use-reset-state' },
       { title: 'useSet', link: '/hooks/use-set' },
       { title: 'useToggle', link: '/hooks/use-toggle' },
       { title: 'useUpdate', link: '/hooks/use-update' },

packages/hooks/src/index.ts

@@ -13,6 +13,7 @@ import useMemoizedFn from './useMemoizedFn'
 import useMount from './useMount'
 import useOs from './useOs'
 import useRequest from './useRequest'
+import useResetState from './useResetState'
 import useSet from './useSet'
 import useTitle from './useTitle'
 import useToggle from './useToggle'
@@ -36,6 +37,7 @@ export {
   useMount,
   useOs,
   useRequest,
+  useResetState,
   useSet,
   useTitle,
   useToggle,

packages/hooks/src/useResetState/example/example.tsx

@@ -0,0 +1,31 @@
+import { Button } from 'antd'
+import { useResetState } from 'etc-hooks'
+import React from 'react'
+
+interface State {
+  hello: string
+  count: number
+}
+
+export default () => {
+  const [state, setState, resetState] = useResetState<State>({
+    hello: '',
+    count: 0,
+  })
+
+  return (
+    <div>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+      <p>
+        <Button
+          style={{ marginRight: '8px' }}
+          onClick={() => setState({ hello: 'world', count: 1 })}
+        >
+          set hello and count
+        </Button>
+
+        <Button onClick={resetState}>resetState</Button>
+      </p>
+    </div>
+  )
+}

packages/hooks/src/useResetState/index.md

@@ -0,0 +1,20 @@
+---
+nav:
+  path: /hooks
+---
+
+# useResetState
+
+提供重置 state 方法的 Hooks，用法与 `React.useState` 基本一致。
+
+## 代码演示
+
+<code hideActions='["CSB"]' src="./example/example.tsx"></code>
+
+## API
+
+```typescript
+const [state, setState, reset] = useResetState<S>(
+  initialState: S | (() => S),
+): [S, Dispatch<SetStateAction<S>>, () => void]
+```

packages/hooks/src/useResetState/index.ts

@@ -0,0 +1,19 @@
+import type { Dispatch, SetStateAction } from 'react'
+import { useState } from 'react'
+import useMemoizedFn from '../useMemoizedFn'
+
+type ResetState = () => void
+
+const useResetState = <S>(
+  initialState: S | (() => S),
+): [S, Dispatch<SetStateAction<S>>, ResetState] => {
+  const [state, setState] = useState(initialState)
+
+  const reset = useMemoizedFn(() => {
+    setState(initialState)
+  })
+
+  return [state, setState, reset]
+}
+
+export default useResetState