UseArrayState

1'use client';
2 
3import { useCallback, useMemo, useState } from 'react';
4 
5export type UseArrayStateResult<T> = {
6  array: T[];
7  length: number;
8  push: (...items: T[]) => void;
9  pop: () => T | undefined;
10  shift: () => T | undefined;
11  unshift: (...items: T[]) => void;
12  insert: (index: number, ...items: T[]) => void;
13  remove: (index: number) => void;
14  removeWhere: (predicate: (item: T, index: number) => boolean) => void;
15  update: (index: number, item: T) => void;
16  updateWhere: (
17    predicate: (item: T, index: number) => boolean,
18    newItem: T,
19  ) => void;
20  clear: () => void;
21  reset: () => void;
22  setValue: (newArray: T[]) => void;
23  filter: (predicate: (item: T, index: number) => boolean) => void;
24  sort: (compareFn?: (a: T, b: T) => number) => void;
25  reverse: () => void;
26  map: <U>(transform: (item: T, index: number) => U) => U[];
27  find: (predicate: (item: T, index: number) => boolean) => T | undefined;
28  findIndex: (predicate: (item: T, index: number) => boolean) => number;
29  includes: (item: T) => boolean;
30  indexOf: (item: T) => number;
31  slice: (start?: number, end?: number) => T[];
32  isEmpty: boolean;
33  first: T | undefined;
34  last: T | undefined;
35};
36 
37export interface UseArrayStateOptions<T> {
38  /**
39   * Initial array value
40   */
41  initialValue?: T[];
42  /**
43   * Callback called whenever the array changes
44   */
45  onChange?: (array: T[]) => void;
46}
47 
48/**
49 * Manages an array as a React state with built-in array manipulation methods
50 * @param options - Configuration options for the hook
51 * @returns Object with array state and manipulation methods
52 */
53export function useArrayState<T>(
54  options: UseArrayStateOptions<T> = {},
55): UseArrayStateResult<T> {
56  const { initialValue = [], onChange } = options;
57 
58  const [array, setArray] = useState<T[]>(initialValue);
59  const initialArray = useMemo(() => [...initialValue], [initialValue]);
60 
61  // Helper to update array and call onChange
62  const updateArray = useCallback(
63    (newArray: T[]) => {
64      setArray(newArray);
65      if (onChange) {
66        onChange(newArray);
67      }
68    },
69    [onChange],
70  );
71 
72  // Array manipulation methods
73  const push = useCallback(
74    (...items: T[]) => {
75      setArray((prev) => {
76        const newArray = [...prev, ...items];
77        if (onChange) onChange(newArray);
78        return newArray;
79      });
80    },
81    [onChange],
82  );
83 
84  const pop = useCallback(() => {
85    let poppedItem: T | undefined;
86    setArray((prev) => {
87      if (prev.length === 0) return prev;
88// … truncated