fix(useCounter): fix initial count not limited by max & min options

sheinsight · Sep 24, 2024 · 882562e · 882562e
1 parent c561168
commit 882562e
Showing 1 changed file with 17 additions and 18 deletions.
diff --git a/packages/react-use/src/use-counter/index.ts b/packages/react-use/src/use-counter/index.ts
@@ -2,7 +2,6 @@ import { useCreation } from '../use-creation'
 import { useLatest } from '../use-latest'
 import { useSetState } from '../use-set-state'
 import { useStableFn } from '../use-stable-fn'
-import { useUpdateDeepCompareEffect } from '../use-update-deep-compare-effect'
 import { useUpdateEffect } from '../use-update-effect'
 import { clamp } from '../utils/basic'
 
@@ -80,40 +79,40 @@ export type UseCounterReturns = readonly [
  * @param {number} [initialCount=0] - `number`, The initial value of the counter
  * @param {UseCounterOptions} [options] - `UseCounterOptions`, The options of the counter, see {@link UseCounterOptions}
  */
-export function useCounter(initialCount?: number, options: UseCounterOptions = {}): UseCounterReturns {
+export function useCounter(initialCount: number = 0, options: UseCounterOptions = {}): UseCounterReturns {
+  const { min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER } = options
+
   const [state, setState] = useSetState<UseCounterState>(
     {
-      initialCount: initialCount ?? 0,
-      count: initialCount ?? 0,
-      max: options.max ?? Number.POSITIVE_INFINITY,
-      min: options.min ?? Number.NEGATIVE_INFINITY,
+      initialCount: initialCount,
+      count: clamp(initialCount, min, max),
+      max,
+      min,
     },
     { deep: true },
   )
 
   const latest = useLatest(state)
 
-  useUpdateEffect(() => void setState({ initialCount: initialCount ?? 0 }), [initialCount])
+  useUpdateEffect(() => {
+    setState({ initialCount })
+  }, [initialCount])
 
-  useUpdateDeepCompareEffect(() => {
-    const [max, min] = [options.max ?? Number.POSITIVE_INFINITY, options.min ?? Number.NEGATIVE_INFINITY]
-    const count = clamp(latest.current.count, min, max)
-    setState({ count, max, min })
-  }, [options])
+  useUpdateEffect(() => {
+    const [max, min] = [options.max ?? Number.MAX_SAFE_INTEGER, options.min ?? Number.MIN_SAFE_INTEGER]
+    setState((pre) => ({ count: clamp(pre.count, min, max), max, min }))
+  }, [options.max, options.min])
 
   const inc = useStableFn((delta = 1) => {
-    const { max, min, count } = latest.current
-    setState({ count: clamp(count + delta, min, max) })
+    setState((pre) => ({ count: clamp(pre.count + delta, pre.min, pre.max) }))
   })
 
   const dec = useStableFn((delta = 1) => {
-    const { max, min, count } = latest.current
-    setState({ count: clamp(count - delta, min, max) })
+    setState((pre) => ({ count: clamp(pre.count - delta, pre.min, pre.max) }))
   })
 
   const set = useStableFn((value: number) => {
-    const { max, min } = latest.current
-    setState({ count: clamp(value, min, max) })
+    setState((pre) => ({ count: clamp(value, pre.min, pre.max) }))
   })
 
   const get = useStableFn(() => latest.current.count)