false change item id exception

[rolanday]

Provide a general summary of the issue here

When rendering / not rendering item in collection based on state flag, rac throws an exception claiming item id changed. Code is slight variant on the rac menu sample:

      <MenuTrigger>
        <Button aria-label="Menu">☰</Button>
        <Popover>
          <Menu onAction={() => setUser((p) => !p)}>
            {user ? (
              <Section>
                <Item id="account">Account</Item>
                <Item id="signout">Sign out</Item>
              </Section>
            ) : (
              <Section>
                <Item id="signin">Sign in</Item>
              </Section>
            )}
          </Menu>
        </Popover>
      </MenuTrigger>

When select item, flips state and swaps sections rendered, resulting in:

Error: Cannot change the id of an item
    at $7135fc7d473fd974$export$dc064fe9e59310fd.setProps (http://localhost:3000/build/routes/_index-4NWDFMCL.js:7009:15)
    at http://localhost:3000/build/routes/_index-4NWDFMCL.js:7369:63
    at commitAttachRef (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:17271:28)
    at commitLayoutEffectOnFiber (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:17159:17)
    at commitLayoutMountEffects_complete (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:17976:17)
    at commitLayoutEffects_begin (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:17965:15)
    at commitLayoutEffects (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:17916:11)
    at commitRootImpl (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:19349:13)
    at commitRoot (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:19273:13)
    at performSyncWorkOnRoot (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:18891:11)

🤔 Expected Behavior?

Able to conditionally render node in menu component tree based on state

😯 Current Behavior

Unble to conditionally render node in menu component tree based on state

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Repo available at following repro:
https://github.com/rolanday/react-aria-change-id

1. Clone
2. Install node modules
3. npm run dev
4. Open menu, click item, observe result in devtools

Version

"react-aria-components": "^1.0.0-beta.0",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

I've reproduced it locally, will have to dig further into what exactly the RAC collection node processing is doing here but it seem item order specific. Conditionally rendering something like this:

          {user ? (
            <Item id="account">Account</Item>
          ) : (
            <>
              <Item id="account">Account</Item>
              <Item id="signin">Sign in</Item>
            </>
          )}

works but

          {user ? (
            <Item id="account">Account</Item>
          ) : (
            <>
              <Item id="signin">Sign in</Item>
              <Item id="account">Account</Item>
            </>
          )}

doesn't. @devongovett any insights as to what is going on here?

That being said, rendering your Sections/Items dynamically seems to work just fine:

  let items1 = [
    {
      id: 'a',
      children: [
        {id: 'account', name: 'Account'},
        {id: 'signout', name: 'Sign out'}
      ]
    }
  ];

  let items2 = [
    {
      id: 'b',
      children: [
        {id: 'signin', name: 'Sign in'}
      ]
    }
  ];

  let [user, setUser] = React.useState(true);
  return (
    <MenuTrigger>
      <Button aria-label="Menu">☰</Button>
      <Popover>
        <Menu onAction={() => setUser((p) => !p)} items={user ? items1 : items2}>
          {section => (
            <Section items={section.children}>
              {item => <Item>{item.name}</Item>}
            </Section>
          )}
        </Menu>
      </Popover>
    </MenuTrigger>
  );

[devongovett]

This is a bit of a gotcha with React itself. React's diff algorithm will reuse DOM nodes by default, so when the Sign in item is clicked, the DOM node is reused for the Account item. That's why it looks like the id is changing from React Aria's perspective.

We might be able to make some improvements, but it's a bit complicated. In the meantime, you can solve this by adding the key prop to your items in addition to id. React will see that the keys are different and will create a new item instead of reusing. This is actually more semantically correct about what's happening anyway: the Account and Sign in items are actually distinct, not the same item being updated. Here's an example: https://codesandbox.io/s/strange-bush-mqksm4?file=/src/App.js

[rolanday]

Thank you both for looking into this an replying. I had a hunch node was being reused but didn't know if expected behavior or not. This (conditionally rendering item in a menu tree) is a pretty familiar pattern for me and first I've run into similar issue for statically added items (including not seeing same on hooks menu implementation previously used). It's simple enough to add a key. Thank you again!