useList

Un Hook de React que gestiona un arreglo como estado. Proporciona una gestión eficiente del estado y funciones de acción estables.

Interfaz

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

Parámetros

• initialStateT[]
  

  Estado inicial del arreglo.

Valor de retorno

• UseListReturn<T>
  

  Una tupla que contiene el estado del arreglo y las acciones para manipularlo.

  • listReadonlyArray<T>
    

    El estado actual del arreglo.

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

    Añade un valor al final de la lista.

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

    Inserta un valor en el índice especificado.

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

    Actualiza el valor en el índice especificado.

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

    Elimina el valor en el índice especificado.

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

    Reemplaza toda la lista por un nuevo arreglo.

  • actions.reset() => void
    

    Restablece la lista a su estado inicial.

Ejemplo

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

// Añadir un elemento
actions.push('cherry');

// Insertar en un índice
actions.insertAt(1, 'grape');

// Actualizar en un índice
actions.updateAt(0, 'orange');

// Eliminar en un índice
actions.removeAt(2);

// Reemplazar todo
actions.setAll(['kiwi', 'mango']);

// Restablecer al estado inicial
actions.reset();