Keys vs Ids

[seanrcollings]

I've noticed that React Aria Components (ListBox for example), and the new @react-aria/collections package both opt to make use of an id prop in collections.

In contrast, react-aria hooks (useListBox) all make use of key instead.

Is there anything in particular that's motivated this difference? I've been messing around with the @react-aria/collection package and really like the flexibility it provides you for building your own collection components. However, if a component was built using one of the hooks and uses the key prop, migrating to the new API doesn't appear to be seamless (unless I'm missing a way to support both / switch to the old behavior). Is it possible to support the key prop as an alternate, or potentially that's planned for in the future?

Additionally, since ListBox and it's ilk all use id props, the names of other props like selectedKeys make a bit less sense. Is there a plan to rename those props to something like selectedIds in the future?

[devongovett]

It comes down to an implementation difference. The old collection implementation used by default in the hooks was able to use key because it walked the JSX tree. However, this implemented prevented making wrapper components as expected with React (e.g. MyListBoxItem wrapping Item). We moved to another approach that fixed this problem by letting React render as normal instead of traversing the JSX tree, but React does not pass key into components as a prop so we were forced to rename it to id.

Additionally, since ListBox and it's ilk all use id props, the names of other props like selectedKeys make a bit less sense.

Changing all of these APIs could be done, potentially in a breaking change release sometime down the line, but we have no plans to change it in the immediate future. Too big of a change for not enough benefit.

[seanrcollings]

Thanks, that makes a lot of sense!

A bit of followup:

Changing all of these APIs could be done, potentially in a breaking change release sometime down the line, but we have no plans to change it in the immediate future. Too big of a change for not enough benefit.

Given what you said here, I assume that react-aria-components never used the key approach, since otherwise that'd also be a breaking change?

[devongovett]

Right, react-aria-components never used key, only id. But the other APIs, like selectedKeys, are implemented in lower level hooks that predate it. If we were implementing them from scratch today, we'd probably call it selectedIds, but since they already exist we couldn't really change them.