Implementation:OpenHands OpenHands UseArray

Knowledge Sources	OpenHands
Domains	UI_Components, React
Last Updated	2026-02-11 21:00 GMT

Overview

A generic React hook that manages array state with a rich set of immutable manipulation actions.

Description

The useArray hook provides a convenient way to manage array state in React components. It accepts an initial value (either a single item or an array) and returns a tuple of the current array and an ArrayActions<T> object containing seven manipulation methods: push, replace, addAtIndex, removeAt, remove, subset, and clear. All operations are immutable, producing a new array on each update. The source file is 65 lines long.

Usage

Use the useArray hook whenever a component needs to manage a list of items with frequent additions, removals, or replacements. It is ideal for managing dynamic lists such as tags, filters, selected items, form field arrays, and chat messages.

Code Reference

Source Location

openhands-ui/shared/hooks/use-array.ts (65 lines)

Signature

function useArray<T>(initialValue: T | T[]): [T[], ArrayActions<T>];

interface ArrayActions<T> {
  push(item: T): void;
  replace(index: number, item: T): void;
  addAtIndex(index: number, item: T): void;
  removeAt(index: number): void;
  remove(item: T): void;
  subset(indices: number[]): void;
  clear(): void;
}

Import

import { useArray } from "@openhands/ui";

I/O Contract

Inputs (Props)

Parameter	Type	Required	Description
`initialValue`	`T \| T[]`	Yes	The initial value for the array. A single item is automatically wrapped in an array.

Outputs

Returns a tuple [T[], ArrayActions<T>]:

Output	Type	Description
`[0]`	`T[]`	The current array state.
`[1].push`	`(item: T) => void`	Appends an item to the end of the array.
`[1].replace`	`(index: number, item: T) => void`	Replaces the item at the specified index.
`[1].addAtIndex`	`(index: number, item: T) => void`	Inserts an item at the specified index, shifting subsequent items.
`[1].removeAt`	`(index: number) => void`	Removes the item at the specified index.
`[1].remove`	`(item: T) => void`	Removes the first occurrence of the specified item (by reference equality).
`[1].subset`	`(indices: number[]) => void`	Retains only the items at the specified indices, discarding the rest.
`[1].clear`	`() => void`	Removes all items from the array.

Usage Examples

import { useArray } from "@openhands/ui";

function TagManager() {
  const [tags, tagActions] = useArray<string>([]);

  const addTag = (tag: string) => {
    tagActions.push(tag);
  };

  const removeTag = (index: number) => {
    tagActions.removeAt(index);
  };

  const clearAll = () => {
    tagActions.clear();
  };

  return (
    <div>
      <input
        placeholder="Add tag..."
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            addTag(e.currentTarget.value);
            e.currentTarget.value = "";
          }
        }}
      />
      <div>
        {tags.map((tag, i) => (
          <span key={i}>
            {tag} <button onClick={() => removeTag(i)}>x</button>
          </span>
        ))}
      </div>
      <button onClick={clearAll}>Clear All</button>
    </div>
  );
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment