useCounter

state

Installation

npx usehooks-cli@latest add use-counter

Description

A simple and efficient React hook for managing counter state with increment, decrement, reset, and set operations.

Parameters

Name	Type	Default	Description
initialValue?	number	0	The initial value for the counter

Return Type

UseCounterReturn

Property	Type	Description
count	number	The current counter value
increment	() => void	Increment the counter by 1
decrement	() => void	Decrement the counter by 1
reset	() => void	Reset the counter to its initial value
set	(value: number) => void	Set the counter to a specific value

Examples

Basic Usage

Simple counter with increment and decrement

const { count, increment, decrement, reset } = useCounter(0);

return (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>+</button>
    <button onClick={decrement}>-</button>
    <button onClick={reset}>Reset</button>
  </div>
);

With Initial Value

Counter starting from a specific value

const { count, increment, set } = useCounter(10);

// Set to specific value
const handleSetToHundred = () => set(100);

Dependencies

react

Notes

•All mutation methods are memoized with useCallback for optimal performance
•The reset function remembers the initial value passed to the hook
•Safe to use in concurrent mode as it uses functional state updates

Implementation

"use client";

import { useState, useCallback } from "react";

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

export function useCounter(initialValue: number = 0): UseCounterReturn {
  const [count, setCount] = useState(initialValue);

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

  return {
    count,
    increment,
    decrement,
    reset,
    set,
  };
}

useArray

CLI Docs All Hooks

useLocalStorage