The Ultimate React Array Management Hook: useArray

Managing array state in React can be cumbersome when you need to perform common operations like adding, removing, updating, or sorting items. The useArray hook provides a powerful solution that encapsulates all these operations with optimized performance.

What is useArray?

The useArray hook is a comprehensive React hook that provides helper methods for working with array state. It includes all the common array operations you'd expect - push, pop, filter, sort, and many more - all optimized with useCallback for performance.

Key Features

🚀 Complete Array Operations

The hook provides methods for:

• Adding items : push , unshift , insert
• Removing items : pop , shift , remove , removeById
• Updating items : update , updateById , replace
• Array manipulation : filter , sort , reverse , clear
• Utility operations : toggle (add/remove based on existence)

⚡ Performance Optimized

All mutation methods are memoized with useCallback , preventing unnecessary re-renders in child components.

🎯 Type Safe

Built with TypeScript generics, providing full type safety for your array elements.

📊 Convenient Properties

Includes helpful properties like isEmpty and length for easy state checking.

Basic Usage

Basic Usage

Let's start with a simple example that demonstrates the core functionality of the useArray hook. In this example, we'll create a component that manages a numeric array with basic operations:

• Displaying the current array state
• Adding numbers using push()
• Removing the last number using pop()
• Clearing the entire array using clear()

The hook provides these methods in a clean, intuitive interface:

1import { useArray } from "@usehooks-io/hooks";
2
3function BasicExample() {
4  const { array, push, pop, clear } = useArray([1, 2, 3]);
5
6  return (
7    <div>
8      <p>Array: {JSON.stringify(array)}</p>
9      <button onClick={() => push(4)}>Push 4</button>
10      <button onClick={pop}>Pop</button>
11      <button onClick={clear}>Clear</button>
12    </div>
13  );
14}
15

Advanced Operations

ID-Based Operations

The hook provides convenient methods for working with objects that have unique identifiers:

1import { useArray } from "@usehooks-io/hooks";
2
3interface User {
4  id: number;
5  name: string;
6}
7
8function UserList() {
9  const {
10    array: users,
11    removeById,
12    updateById,
13  } = useArray<User>([
14    { id: 1, name: "Alice" },
15    { id: 2, name: "Bob" },
16  ]);
17
18  return (
19    <div>
20      {users.map((user) => (
21        <div key={user.id}>
22          {user.name}
23          <button onClick={() => removeById(user.id)}>Remove</button>
24          <button
25            onClick={() =>
26              updateById(user.id, { name: user.name + " Updated" })
27            }
28          >
29            Update
30          </button>
31        </div>
32      ))}
33    </div>
34  );
35}
36

Array Manipulation

The hook provides powerful methods for manipulating arrays at specific positions. You can insert elements at any index, remove items by position, and replace existing values with new ones. Here's a simple example demonstrating these operations:

1import { useArray } from "@usehooks-io/hooks";
2
3function ManipulationExample() {
4  const { array, insert, remove, replace } = useArray(["a", "b", "c"]);
5
6  return (
7    <div>
8      <p>Array: {JSON.stringify(array)}</p>
9      <button onClick={() => insert(1, "x")}>Insert 'x' at index 1</button>
10      <button onClick={() => remove(0)}>Remove first item</button>
11      <button onClick={() => replace("b", "y")}>Replace 'b' with 'y'</button>
12    </div>
13  );
14}
15

Toggle Functionality

Perfect for managing selections or favorites:

1import { useArray } from "@usehooks-io/hooks";
2
3function ToggleExample() {
4  const { array: selectedItems, toggle } = useArray<string>(["apple"]);
5  const items = ["apple", "banana", "orange"];
6
7  return (
8    <div>
9      <p>Selected: {JSON.stringify(selectedItems)}</p>
10      {items.map((item) => (
11        <button
12          key={item}
13          onClick={() => toggle(item)}
14          style={{
15            backgroundColor: selectedItems.includes(item)
16              ? "lightblue"
17              : "white",
18          }}
19        >
20          {item}
21        </button>
22      ))}
23    </div>
24  );
25}
26

API Reference

Parameters

• initialArray (optional): The initial array value (defaults to empty array)

Return Value

The hook returns an object with: State

• array : The current array state
• isEmpty : Boolean indicating if array is empty
• length : Current array length Mutation Methods
• set(newArray) : Replace entire array
• push(...items) : Add items to end
• pop() : Remove and return last item
• shift() : Remove and return first item
• unshift(...items) : Add items to beginning
• insert(index, ...items) : Insert items at specific index
• remove(index) : Remove item at index
• removeById(id, key?) : Remove item by ID
• update(index, item) : Update item at index
• updateById(id, updates, key?) : Update item by ID
• clear() : Remove all items
• filter(predicate) : Filter array in place
• sort(compareFn?) : Sort array in place
• reverse() : Reverse array
• replace(oldItem, newItem) : Replace specific item
• toggle(item) : Add/remove item based on existence

Why Use useArray?

1. Reduced Boilerplate

Instead of writing custom state management logic for each array operation, you get them all out of the box.

2. Performance Benefits

All methods are memoized, preventing unnecessary re-renders and improving app performance.

3. Type Safety

Full TypeScript support ensures you catch errors at compile time.

4. Consistent API

All array operations follow a consistent pattern, making your code more predictable and maintainable.

5. Flexibility

Supports both index-based and ID-based operations, covering most real-world use cases.

Real-World Examples

Shopping Cart

Shopping Cart

Let's look at a practical example of using useArray to build a shopping cart. This example demonstrates:

• Managing a cart with products that have quantities
• Adding products with quantity tracking
• Removing items from the cart
• Calculating total price
• Clearing the entire cart

Here's how we can implement a basic shopping cart:

1import { useArray } from "@usehooks-io/hooks";
2
3interface Product {
4  id: number;
5  name: string;
6  price: number;
7  quantity: number;
8}
9
10function ShoppingCart() {
11  const {
12    array: cartItems,
13    push,
14    removeById,
15    updateById,
16    clear,
17  } = useArray<Product>([]);
18
19  const addProduct = (product: Omit<Product, "quantity">) => {
20    const existingItem = cartItems.find((item) => item.id === product.id);
21    if (existingItem) {
22      updateById(product.id, { quantity: existingItem.quantity + 1 });
23    } else {
24      push({ ...product, quantity: 1 });
25    }
26  };
27
28  const total = cartItems.reduce(
29    (sum, item) => sum + item.price * item.quantity,
30    0
31  );
32
33  return (
34    <div>
35      <h2>Shopping Cart</h2>
36      {cartItems.map((item) => (
37        <div key={item.id}>
38          {item.name} - Qty: {item.quantity} - ${item.price * item.quantity}
39          <button onClick={() => removeById(item.id)}>Remove</button>
40        </div>
41      ))}
42      <p>Total: ${total.toFixed(2)}</p>
43      <button
44        onClick={() => addProduct({ id: 1, name: "Laptop", price: 1200 })}
45      >
46        Add Laptop
47      </button>
48      <button onClick={clear}>Clear Cart</button>
49    </div>
50  );
51}
52

Conclusion

The useArray hook is a powerful tool that simplifies array state management in React applications. By providing a comprehensive set of optimized methods, it reduces boilerplate code while improving performance and maintainability.

Whether you're building a simple todo list or a complex data management interface, useArray provides the tools you need to handle array operations efficiently and elegantly.

Try it out in your next React project and experience the difference it makes in your development workflow!