Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/dev/s2-docs/pages/react-aria/collections.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,10 @@ function MyItem(props: MyItemProps) {

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.

### Updating the collection structure

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Team chatted about this today. We think it's going too much into "how collections work" and it's probably enough to just say what the common problem is and where the state should live to fix it.


The `dependencies` prop covers cases where external state affects _how_ an item renders. A separate rule applies when state controls _which_ items exist: the state that adds, removes, or reorders items must live **above** the collection component, not inside its children. State updated from below the collection only re-renders the visible content and won't change its structure. This includes children rendered in a deferred subtree like a `Select` or `ComboBox` popover, so reading from a context such as `SelectStateContext` inside a `Menu` or `ListBox` can't add or remove items. Lift that state above the collection and pass the resulting items down.

### Combining collections

To combine multiple sources of data, or mix static and dynamic items, use the `<Collection>` component.
Expand Down