Deviopath › React

useCounter Hook

Medium · Custom Hooks

Write a custom hook useCounter(initial, step) that returns { count, increment, decrement, reset }:

- increment adds step

- decrement subtracts step but never goes below 0 (it stops at 0)

- reset goes back to initial

The Counter component uses the hook and renders <div className="counter"> with <h3>{label}</h3>, <p>{count}</p> and three buttons: "-", "+" and "Reset". The "-" button is disabled when the count is 0.

App renders two independent counters: <Counter label="Ones" initial={0} step={1} /> and <Counter label="Tens" initial={25} step={10} />.

Next: Temperature Converter