0 ~ max까지의 값을 무한하게 순환할 수 있는 카운터 훅

useCircularCounter.ts

import { useState, useCallback } from 'react';

export function useCircularCounter(
  initialValue: number = 0,
  max: number
): [number, () => void, () => void, () => void] {
  const [value, setValue] = useState(initialValue);

  const init = useCallback(() => setValue(0), []);

  const increase = useCallback(() => {
    setValue((value + 1) % max);
  }, [max, value]);

  const decrease = useCallback(() => {
    const prevValue = value - 1;
    const weight = Math.ceil(Math.abs(prevValue) / max) * max;
    setValue((prevValue + weight) % max);
  }, [max, value]);

  return [value, init, increase, decrease];
}