React Dojo

Search

Search concepts, exercises and quizzes

state

useCounter

Manages a numeric counter with increment, decrement, reset, and set helpers. Supports optional min and max boundaries.


useCounter.ts
import { useState, useCallback } from "react"

interface UseCounterOptions {
  min?: number
  max?: number
}

interface UseCounterReturn {
  count: number
  increment: () => void
  decrement: () => void
  reset: () => void
  set: (value: number) => void
}

export function useCounter(
  initialValue = 0,
  options: UseCounterOptions = {}
): UseCounterReturn {
  const { min, max } = options

  const clamp = useCallback(
    (value: number) => {
      if (min !== undefined && value < min) return min
      if (max !== undefined && value > max) return max
      return value
    },
    [min, max]
  )

  const [count, setCount] = useState(() => clamp(initialValue))

  const increment = useCallback(() => setCount((c) => clamp(c + 1)), [clamp])
  const decrement = useCallback(() => setCount((c) => clamp(c - 1)), [clamp])
  const reset = useCallback(() => setCount(clamp(initialValue)), [clamp, initialValue])
  const set = useCallback((value: number) => setCount(clamp(value)), [clamp])

  return { count, increment, decrement, reset, set }
}
Was this helpful?
Sign in to give feedback