useList

配列を状態として管理する React フックです。 効率的な状態管理と、参照が安定したアクション関数を提供します。

インターフェース

function useList<T>(initialState: T[] = []): UseListReturn<T>;

パラメータ

• initialStateT[]
  

  配列の初期状態です。

戻り値

• UseListReturn<T>
  

  配列の状態と、それを操作するアクションを含むタプルです。

  • listReadonlyArray<T>
    

    現在の配列の状態です。

  • actions.push(value: T) => void
    

    リストの末尾に値を追加します。

  • actions.insertAt(index: number, value: T) => void
    

    指定したインデックスに値を挿入します。

  • actions.updateAt(index: number, value: T) => void
    

    指定したインデックスの値を更新します。

  • actions.removeAt(index: number) => void
    

    指定したインデックスの値を削除します。

  • actions.setAll(values: T[]) => void
    

    リスト全体を新しい配列に置き換えます。

  • actions.reset() => void
    

    リストを初期状態に戻します。

使用例

const [list, actions] = useList<string>(['apple', 'banana']);

// 項目を追加します
actions.push('cherry');

// 指定したインデックスに挿入します
actions.insertAt(1, 'grape');

// 指定したインデックスの値を更新します
actions.updateAt(0, 'orange');

// 指定したインデックスの値を削除します
actions.removeAt(2);

// 全体を置き換えます
actions.setAll(['kiwi', 'mango']);

// 初期状態に戻します
actions.reset();