# updateArray

```ts
import { updateArray } from 'cx/data';
```


`updateArray` performs immutable updates on arrays. It applies a callback to transform items, optionally filtering which items to update and which to remove. Returns the original array if no changes were made.

```tsx
import { updateArray, createModel } from "cx/data";
import { Controller } from "cx/ui";
import { Button, Grid } from "cx/widgets";

interface Item {
  id: number;
  name: string;
  count: number;
}

interface Model {
  items: Item[];
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.items, [
      { id: 1, name: "Apple", count: 5 },
      { id: 2, name: "Banana", count: 3 },
      { id: 3, name: "Cherry", count: 8 },
      { id: 4, name: "Date", count: 2 },
    ]);
  }

  incrementAll() {
    this.store.update(m.items, (items) =>
      updateArray(items, (item) => ({ ...item, count: item.count + 1 })),
    );
  }

  incrementEven() {
    this.store.update(m.items, (items) =>
      updateArray(
        items,
        (item) => ({ ...item, count: item.count + 1 }),
        (item) => item.id % 2 === 0,
      ),
    );
  }

  removeSmall() {
    this.store.update(m.items, (items) =>
      updateArray(
        items,
        (item) => item,
        null,
        (item) => item.count < 3,
      ),
    );
  }

  reset() {
    this.onInit();
  }
}

export default (
  <div controller={PageController}>
    <Grid
      records={m.items}
      columns={[
        { header: "ID", field: "id", align: "center" },
        { header: "Name", field: "name" },
        { header: "Count", field: "count", align: "right" },
      ]}
    />
    <div style="margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap">
      <Button onClick="incrementAll">Increment All</Button>
      <Button onClick="incrementEven">Increment Even IDs</Button>
      <Button onClick="removeSmall">Remove Count &lt; 3</Button>
      <Button onClick="reset">Reset</Button>
    </div>
  </div>
);

```

## Signature

```ts
function updateArray<T>(
  array: T[],
  updateCallback: (item: T, index: number) => T,
  itemFilter?: (item: T, index: number) => boolean,
  removeFilter?: (item: T, index: number) => boolean
): T[]
```

## Parameters

| Parameter        | Type       | Description                                                    |
| ---------------- | ---------- | -------------------------------------------------------------- |
| `array`          | `T[]`      | The array to update.                                           |
| `updateCallback` | `function` | Transform function applied to each item (or filtered items).   |
| `itemFilter`     | `function` | Optional. If provided, only items matching this filter are updated. |
| `removeFilter`   | `function` | Optional. Items matching this filter are removed from the result. |

## Return Value

Returns a new array with updates applied, or the original array if nothing changed (preserves reference equality).

## Examples

### Update all items

```ts
const items = [{ id: 1, count: 5 }, { id: 2, count: 3 }];

const updated = updateArray(items, (item) => ({
  ...item,
  count: item.count + 1,
}));
// [{ id: 1, count: 6 }, { id: 2, count: 4 }]
```

### Update specific items

```ts
const items = [{ id: 1, count: 5 }, { id: 2, count: 3 }];

const updated = updateArray(
  items,
  (item) => ({ ...item, count: item.count * 2 }),
  (item) => item.id === 2, // only update item with id 2
);
// [{ id: 1, count: 5 }, { id: 2, count: 6 }]
```

### Remove items while updating

```ts
const items = [{ id: 1, count: 5 }, { id: 2, count: 3 }];

const updated = updateArray(
  items,
  (item) => item,
  null, // no filter for updates
  (item) => item.count < 4, // remove items with count < 4
);
// [{ id: 1, count: 5 }]
```

## See Also

- [filter](/docs/utilities/filter) - Immutable array filtering
- [append](/docs/utilities/append) - Immutable array append