useList

A stateful array management hook providing memoized utility functions for CRUD operations on lists.

Note
All methods (push, insert, remove, update) are immutable. They generate a new array reference to ensure React detects the change and triggers a re-render correctly.

Installation

bash

Description

The useList abstracts the complexity of managing array-based state in React. It provides a suite of imperative-like-methods—push, insert, update, and remove—that internally handle immutable state updates, ensuring the component re-renders correctly while keeping the implementation logic clean and readable.

Parameters

Name	Type	Description
data	T[]	The initial array to populate the state. Default: []

Return values

Name	Type	Description
items	T[]	The current stateful array.
push	(item: T) => void	Appends a new item to the end of the array.
insert	(idx: number, item: T) => void	Inserts a new item at the specified index.
update	(idx: number, item: T) => void	Updates an item at the specified index.
remove	(idx: number) => void	Removes an item at the specified index.

Demo

To-Do List

Additionally, useList returns an insert function that allows you to add items to the list at a specific index.

Source code

tsx