Hook that records the history of state changes as an Array buffer upto a certain length.

useStateBuffer.tsx

import {useCallback, useState} from 'react';

export const useStateBuffer = <TType extends any>(
    size: number,
    initialState: TType
) => {
    const [values, setState] = useState<Array<TType>>([initialState]);
    const setValue = useCallback(
        (next: TType) => setState([...values, next].slice(0, size)),
        [values]
    );
    return [values, setValue];
};