some overly memoized hooks

useCycler.ts

import { useState, useMemo, useCallback } from 'react';

function getNextIndex(curr, len, shouldLoop) {
  if (curr === len - 1) return shouldLoop ? 0 : curr;
  return curr + 1;
}

function getPrevIndex(curr, len, shouldLoop) {
  if (curr === 0) return shouldLoop ? len - 1 : 0;
  return curr - 1;
}

/** Util hook to cycle through an array of n values */
interface CyclerInput<T> {
  values: T[];
  start?: number;
  loop?: boolean;
}

export function useCycler<T>({ values = [], start = 0, loop = true }: CyclerInput<T>) {
  const [index, setIndex] = useState(start);
  const value = useMemo(() => values[index], [index]);

  const { length } = values;
  const nextIndex = getNextIndex(index, length, loop);
  const nextValue = useMemo(() => values[nextIndex], [nextIndex]);

  const prevIndex = getPrevIndex(index, length, loop);
  const prevValue = useMemo(() => values[prevIndex], [prevIndex]);

  const cycle = useCallback(() => setIndex(nextIndex), [nextIndex]);
  const reverse = useCallback(() => setIndex(prevIndex), [prevIndex]);

  return {
    cycle,
    reverse,
    value,
    nextValue,
    prevValue,
  };
}

useToggler.ts

import { useState, useMemo, useCallback } from 'react';

const getNextIndex = (curr) => {
  if (curr) return 0;
  return 1;
};

/* Util hook to toggle between two generic values */
interface TogglerInput<T> {
  between: [T, T];
  start?: 0 | 1;
}

export function useToggler<T>({ between: types, start = 0 }: TogglerInput<T>) {
  const [index, setIndex] = useState(start);
  const value = useMemo(() => types[index], [index]);
  const nextValue = useMemo(() => (index ? types[0] : types[1]), [index]);

  const toggle = useCallback(() => setIndex(getNextIndex(index)), [index]);

  return {
    toggle,
    value,
    nextValue,
  };
}