use-counter

1import { useMemo, useReducer } from 'react'
2 
3function reducer(
4  state: number,
5  action:
6    | { type: 'set'; payload: number | ((value: number) => number) }
7    | { type: 'inc' }
8    | { type: 'dec' },
9) {
10  switch (action.type) {
11    case 'set':
12      if (typeof action.payload === 'function') {
13        return action.payload(state)
14      }
15      return action.payload
16    case 'inc':
17      return state + 1
18    case 'dec':
19      return state - 1
20  }
21}
22 
23export function useCounter(initialValue: number = 0) {
24  const [count, dispatch] = useReducer(reducer, initialValue)
25 
26  return [
27    count,
28    useMemo(
29      () => ({
30        set: (value: number | ((value: number) => number)) =>
31          dispatch({ type: 'set', payload: value }),
32        inc: () => dispatch({ type: 'inc' }),
33        dec: () => dispatch({ type: 'dec' }),
34        reset: () => dispatch({ type: 'set', payload: initialValue }),
35      }),
36      [dispatch],
37    ),
38  ] as const
39}