Skip to content

[Feature] Add useList hook with remove and removeAt functions#36147

Open
usmonovshohruxmirzo wants to merge 2 commits intofacebook:mainfrom
usmonovshohruxmirzo:feature/use-list-hook
Open

[Feature] Add useList hook with remove and removeAt functions#36147
usmonovshohruxmirzo wants to merge 2 commits intofacebook:mainfrom
usmonovshohruxmirzo:feature/use-list-hook

Conversation

@usmonovshohruxmirzo
Copy link

Overview

This PR adds a new useList hook to simplify list management in React components.
It provides a convenient way to remove items by condition or by index while automatically triggering re-renders.

Motivation

Currently, developers need to manually use filter or splice to remove items from arrays in React, which is repetitive and error-prone.
useList offers a unified abstraction to simplify these operations.

Features

  • remove(predicate) — Removes items that match the given condition.
  • removeAt(index) — Removes the item at the specified index.
  • setList(newList) — Replaces the entire list.
  • Safe handling for empty lists or invalid indices.

Example Usage

const { list, setList, remove, removeAt } = useList([1, 2, 3, 4]);

// Remove all even numbers
remove(x => x % 2 === 0); // list becomes [1, 3]

// Remove item at index 0
removeAt(0); // list becomes [3]

Test Coverage

  • Initializing list (with default or provided values)
  • Updating list with setList
  • remove for partial match, no match, and full match
  • removeAt for valid index, invalid index, and empty list

Closes #36005

@meta-cla meta-cla bot added the CLA Signed label Mar 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

✨ [Feature Request] 支持删除列表功能

1 participant