useArrayState.ts

useArrayState.ts

import { useState, useCallback } from 'react';

export default function useArrayState<TElement>(initialArr: Array<TElement>) {
  const [arr, setArr] = useState(initialArr);

  const setArrElement = useCallback((index: number, value: TElement) => {
    if (!(index > -1)) return;

    setArr((prevArr) => {
      const arrayCopy = [...prevArr];
      arrayCopy[index] = typeof value === 'function' ? value(prevArr[index]) : value;
      return arrayCopy;
    });
  }, []);

  const delArrElement = useCallback((index: number) => {
    if (!(index > -1)) return;

    setArr((prevArr) => {
      const arrayCopy = [...prevArr];
      arrayCopy.splice(index, 1);
      return arrayCopy;
    });
  }, []);

  return [arr, setArr, setArrElement, delArrElement] as const;
}