# Collections
Many components display a collection of items, and provide functionality such as keyboard navigation, and selection. Learn how to load and render collections using React Aria's compositional API.
## Static collections
A **static collection** is a collection that does not change over time (e.g. hard coded). This is common for components like menus where the items are built into the application rather than user data.
```tsx
import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu';
import {Button} from 'vanilla-starter/Button';
```
### Sections
Sections or groups of items can be constructed by wrapping the items in a section element. A `` can also be rendered within a section to provide a section title.
## Dynamic collections
A **dynamic collection** is a collection that is based on external data, for example from an API. In addition, it may change over time as items are added, updated, or removed from the collection by a user.
Use the `items` prop to provide an array of objects, and a function to render each item as the `children`. This is similar to using `array.map` to render the children, but automatically memoizes the rendering of each item to improve performance.
```tsx
import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
import {Button} from 'vanilla-starter/Button';
import {useState} from 'react';
function Example() {
let [animals, setAnimals] = useState([
{id: 1, name: 'Aardvark'},
{id: 2, name: 'Kangaroo'},
{id: 3, name: 'Snake'}
]);
let addItem = () => {
setAnimals([
...animals,
{id: animals.length + 1, name: 'Lion'}
]);
};
return (
{/*- begin highlight -*/}
{item => {item.name}}
{/*- end highlight -*/}
);
}
```
useListDataFor convenience, React Aria provides a built-in [useListData](https://react-spectrum.adobe.com/react-stately/useListData.html) hook to manage state for an immutable list of items. It includes methods to add, remove, update, and re-order items, and manage corresponding selection state. See the docs for more details.
### Unique ids
All items in a collection must have a unique id, which is used for [selection](selection.md) and to track item updates. By default, React Aria looks for an `id` property on each object in the `items` array. You can also specify an `id` prop when rendering each item. This example uses `item.name` as the `id`.
```tsx
let animals = [
{name: 'Aardvark'},
{name: 'Kangaroo'},
{name: 'Snake'}
];
{item => (
/*- begin highlight -*/
{/*- end highlight -*/}
{item.name}
)}
```
React keysReact Aria automatically sets the React `key` using `id`. If using `array.map`, you'll need to set both `key` and `id`.
### Dependencies
Dynamic collections are automatically memoized to improve performance. Rendered item elements are cached based on the object identity of the list item. If rendering an item depends on additional external state, the `dependencies` prop must be provided. This invalidates rendered elements similar to dependencies in React's `useMemo` hook.
```tsx
import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
import {Text} from 'react-aria-components';
import {ToggleButtonGroup} from 'vanilla-starter/ToggleButtonGroup';
import {ToggleButton} from 'vanilla-starter/ToggleButton';
import {useState} from 'react';
const items = [
{id: 1, name: 'Charizard', type: 'Fire, Flying'},
{id: 2, name: 'Blastoise', type: 'Water'},
{id: 3, name: 'Venusaur', type: 'Grass, Poison'},
{id: 4, name: 'Pikachu', type: 'Electric'}
];
export default function Example() {
let [layout, setLayout] = useState('vertical');
return (
);
}
interface MyItemProps {
layout: 'horizontal' | 'vertical',
name: string,
type: string
}
function MyItem(props: MyItemProps) {
return (
{props.name}{props.type}
);
}
```
Note that adding dependencies will result in the *entire* list being invalidated when a dependency changes. To avoid this and invalidate only an individual item, update the item object itself rather than accessing external state.
### Combining collections
To combine multiple sources of data, or mix static and dynamic items, use the `` component.
```tsx
import {ListBox, ListBoxSection, ListBoxItem} from 'vanilla-starter/ListBox';
import {Collection, Header} from 'react-aria-components';
let animals = [
{id: 1, species: 'Aardvark'},
{id: 2, species: 'Kangaroo'},
{id: 3, species: 'Snake'}
];
let people = [
{id: 4, name: 'David'},
{id: 5, name: 'Mike'},
{id: 6, name: 'Jane'}
];
Animals
{/*- begin highlight -*/}
{item => {item.species}}
{/*- end highlight -*/}
People
{item => {item.name}}
```
Globally unique idsUnlike React keys which must only be unique within each element, the `id` prop must be globally unique across all sections. In the above example, the ids of `animals` and `people` do not conflict.
## Asynchronous loading
Data can be loaded asynchronously using any data fetching library. [useAsyncList](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) is a built-in option.
Several components also support infinite scrolling by rendering a `LoadMoreItem` at the end of the list. These trigger loading of additional pages of items and display a loading spinner. Multiple load more items can be rendered at once, e.g. when loading multiple levels of a tree or sections in a list.
```tsx
import {Collection, ListBoxLoadMoreItem} from 'react-aria-components';
import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
import {ProgressCircle} from 'vanilla-starter/ProgressCircle';
import {useAsyncList} from 'react-stately';
interface Character {
name: string
}
function AsyncLoadingExample() {
/*- begin focus -*/
let list = useAsyncList({
async load({signal, cursor}) {
let res = await fetch(
cursor || `https://pokeapi.co/api/v2/pokemon`,
{signal}
);
let json = await res.json();
return {
items: json.results,
cursor: json.next
};
}
});
/*- end focus -*/
return (
(
)}>
{(item) => {item.name}}
);
}
```