Function useStateWithHistory

src/useStateWithHistory.ts:23–134

(
  initialState?: IHookStateInitAction<S>,
  capacity: number = 10,
  initialHistory?: I[]
)

export function useStateWithHistory<S = undefined>(): UseStateHistoryReturn<S | undefined>;

export function useStateWithHistory<S, I extends S>(
  initialState?: IHookStateInitAction<S>,
  capacity: number = 10,
  initialHistory?: I[]
): UseStateHistoryReturn<S> {
  if (capacity < 1) {
    throw new Error(`Capacity has to be greater than 1, got '${capacity}'`);
  }

  const isFirstMount = useFirstMountState();
  const [state, innerSetState] = useState<S>(initialState as S);
  const history = useRef<S[]>((initialHistory ?? []) as S[]);
  const historyPosition = useRef(0);

  // do the states manipulation only on first mount, no sense to load re-renders with useless calculations
  if (isFirstMount) {
    if (history.current.length) {
      // if last element of history !== initial - push initial to history
      if (history.current[history.current.length - 1] !== initialState) {
        history.current.push(initialState as I);
      }

      // if initial history bigger that capacity - crop the first elements out
      if (history.current.length > capacity) {
        history.current = history.current.slice(history.current.length - capacity);
      }
    } else {
      // initiate the history with initial state
      history.current.push(initialState as I);
    }

    historyPosition.current = history.current.length && history.current.length - 1;
  }

  const setState = useCallback(
    (newState: IHookStateSetAction<S>): void => {
      innerSetState((currentState) => {
        newState = resolveHookState(newState, currentState);

        // is state has changed
        if (newState !== currentState) {
          // if current position is not the last - pop element to the right
          if (historyPosition.current < history.current.length - 1) {
            history.current = history.current.slice(0, historyPosition.current + 1);
          }

          historyPosition.current = history.current.push(newState as I) - 1;

          // if capacity is reached - shift first elements
          if (history.current.length > capacity) {
            history.current = history.current.slice(history.current.length - capacity);
          }
        }

        return newState;
      });
    },
    [state, capacity]