useList

Manage a list state.

https://www.shaktools.com/shak-hooks
State

API Reference

Installation

terminal
pnpm add @shak-hooks/usehooks
import.ts
import { useList } from "@shak-hooks/usehooks";
Source: packages/react/src/useList.ts

Signature

signature.ts
export function useList<T>(initialValue: T[] = [])

Parameters

NameTypeOptionalDefault
initialValueT[]Yes[]

Returns

unknown

Implementation

use-list.ts
1import { useState, useCallback } from "react";
2
3export function useList<T>(initialValue: T[] = []) {
4 const [list, setList] = useState(initialValue);
5
6 const set = useCallback((newList: T[]) => {
7 setList(newList);
8 }, []);
9
10 const push = useCallback((item: T) => {
11 setList((l) => [...l, item]);
12 }, []);
13
14 const updateAt = useCallback((index: number, item: T) => {
15 setList((l) => {
16 const copy = [...l];
17 copy[index] = item;
18 return copy;
19 });
20 }, []);
21
22 const removeAt = useCallback((index: number) => {
23 setList((l) => {
24 const copy = [...l];
25 copy.splice(index, 1);
26 return copy;
27 });
28 }, []);
29
30 const clear = useCallback(() => {
31 setList([]);
32 }, []);
33
34 const reset = useCallback(() => {
35 setList(initialValue);
36 }, [initialValue]);
37
38 return [list, { set, push, updateAt, removeAt, clear, reset }] as const;
39}

Advertisement

Google Ads

Usage

example.tsx
1import { useList } from "@shak-hooks/usehooks";
2
3const result = useList(undefined);
4// result: unknown
5// Use values directly (React state).

Let‘s do great work together

Empowering creators with free, high-performance AI, SEO, and developer tools. Join thousands of users optimizing their workflow with Shak-Tools.

Tools10+ Free
UsersGlobal

Stay in the loop

Join our newsletter for the latest AI tools and updates.

ShakTools
© 2025 Shaktools. All Rights Reserved.Privacy Policy