A React state toggle for arbitrary lists of values, where options are unchanging.

useCycleStable.ts

import { useState, useRef, useCallback } from "react";
/**
 * Like `useCycle`, but more performant and guarantees a stable function reference
 * for the lifetime of the hook. Only safe when the cycle options do not change.
 */
const useCycle = <T>(values: T[], initialState?: T): [T, () => void] => {
  const valuesRef = useRef<T[]>(values);
  const [index, setIndex] = useState<number>(() => {
    const idx = initialState ? values.indexOf(initialState) : 0;
    if (idx === -1) return 0;
    return idx;
  });

  const cycle = useCallback(() => {
    setIndex((idx) => (idx + 1) % valuesRef.current.length);
  }, []);

  return [valuesRef.current[index], cycle];
};

export default useCycle;