useCounter

Learn the useCounter custom hook.

What is useCounter?

useCounter is a custom hook that manages a counter. It holds a number with useState and returns increment and reset functions. You call it as const [count, increment, reset] = useCounter(0).

This hook collects repeated counter logic in one place. You can pass an amount to increment: increment(5) steps by five. Reset returns to the initial value with reset(). If many screens use a counter, useCounter keeps them consistent and short.

Using useCounter

In a component you write const [count, increment, reset] = useCounter(0). When buttons are pressed you call the matching function; count updates each time and the screen re-renders.

The initial value comes from the argument; different screens can pass different starts. You can also pass an argument to increment: increment(5) steps by five. This flexibility makes useCounter useful in real apps, especially shopping carts, scoreboards and games.

Exercise Write useCounter

Write the useCounter custom hook. Hold a count with useState (initial value initial). The increment function adds count + n (n defaults to 1). The hook returns [count, increment].

Show example solution

import { useState } from "react";

function useCounter(initial) {
  const [count, setCount] = useState(initial);
  const increment = (n = 1) => setCount(count + n);
  return [count, increment];
}

Test yourself

Match the useCounter parts

increment

Raises the number
reset

Returns to start
count

Held number
initial

First value

Complete the increment body

function useCounter(initial) {
  const [count, setCount] = useState(initial);
  const increment = (n = 1) => setCount(____);
  return [count, increment];
}

Show answer

function useCounter(initial) {
  const [count, setCount] = useState(initial);
  const increment = (n = 1) => setCount(count + n);
  return [count, increment];
}

What does useCounter return?
```
const [count, increment] = useCounter(0);
```
- The number and an increment function
- Only the increment function
- Nothing
- Only the number
Show answer

The number and an increment function — useCounter returns the number and the increment function.

Next lesson: usePrevious

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies