DOM exception when updating dynamic collection items with useTransition

[azu]

Provide a general summary of the issue here

React Aria's Table component throws a DOM exception when rapidly updating data with useTransition and dynamic collections pattern, causing application crashes.

Error: Attempted to access node before it was defined.
Check if setProps wasn't called before attempting to access the node.

This is a regression introduced in react-aria-components v1.12.0 (working in v1.11.0 and earlier).

🤔 Expected Behavior?

The Table component should handle rapid data updates smoothly without throwing DOM exceptions, even when using:

• Dynamic collections pattern (<TableBody items={data}>)
• React's concurrent features (useTransition)
• Frequent data updates

😯 Current Behavior

When rapidly updating table data wrapped in useTransition, the following error occurs intermittently:

Error: Attempted to access node before it was defined. Check if setProps wasn't called before attempting to access the node.
    at get node (https://react-aria-table-execption.vercel.app/assets/index-_OlR04cw.js:55:48474)
    at pg.removeNode (https://react-aria-table-execption.vercel.app/assets/index-_OlR04cw.js:55:51222)
    at pg.removeNode (https://react-aria-table-execption.vercel.app/assets/index-_OlR04cw.js:55:51167)
    at pg.updateCollection (https://react-aria-table-execption.vercel.app/assets/index-_OlR04cw.js:55:51461)
    at pg.getCollection (https://react-aria-table-execption.vercel.app/assets/index-_OlR04cw.js:55:51326)
    at https://react-aria-table-execption.vercel.app/assets/index-_OlR04cw.js:63:1588
    at Object.Pf [as useSyncExternalStore] (https://react-aria-table-execption.vercel.app/assets/index-_OlR04cw.js:48:38170)
    at de.useSyncExternalStore (https://react-aria-table-execption.vercel.app/assets/index-_OlR04cw.js:17:7621)
    at Ag (https://react-aria-table-execption.vercel.app/assets/index-_OlR04cw.js:63:1704)
    at xg (https://react-aria-table-execption.vercel.app/assets/index-_OlR04cw.js:63:988)

The error only occurs with this specific combination:

1. useTransition wrapping state updates
2. Dynamic collections (<TableBody items={data}>)
3. Rapid successive updates

💁 Possible Solution

The issue appears to be a race condition between React's concurrent rendering (useTransition) and React Aria's collection management system.

The following tests confirm the issue:

• Without useTransition and Without Suspense: No error occurs

🔦 Context

1. Issue [RAC] Table components do not play well with Suspense #6182 showed that Table components don't work well with Suspense, so the recommended workaround was to use startTransition for table updates.

2. Now, using startTransition causes this new DOM exception error.

3. Modern data fetching libraries (Apollo Client, TanStack Query) use Suspense as their standard pattern. This means developers are forced to:

   • Use startTransition to avoid Suspense issues ([RAC] Table components do not play well with Suspense #6182)
   • But this triggers the DOM exception (this bug)
   • There's no way to avoid both issues

Currently, the only workaround is to downgrade to react-aria-components v1.11.0, which many teams are being forced to do. This prevents us from using any new features or bug fixes introduced since v1.12.0.

🖥️ Steps to Reproduce

• Live Demo: https://react-aria-table-execption.vercel.app/
• Reproduction repository: https://github.com/azu/react-aria-table-execption

Quick Reproduction (Online)

1. Visit: https://react-aria-table-execption.vercel.app/
2. Click "Refetch Data" button rapidly (5-10 times quickly)
3. Error appears in console and crashes the app

Error: Attempted to access node before it was defined. Check if setProps wasn't called before attempting to access the node.

Local Reproduction

1. Clone: git clone https://github.com/azu/react-aria-table-execption
2. Install: npm ci
3. Run: npm run dev
4. Click "Refetch Data" button rapidly (5-10 times quickly)
5. Error appears in console and crashes the app

Automated Test

git clone https://github.com/azu/react-aria-table-execption
cd react-aria-table-execption
npm ci
# Runs 1000 iterations to guarantee reproduction
npm run test

Versions

Broken versions (error occurs):
    "react-aria": "3.43.0+",
    "react-aria-components": "1.12.0+",

Working versions (no error):
    "react-aria": "3.42.0",
    "react-aria-components": "1.11.0",

Version

"react-aria": "3.43.1", "react-aria-components": "1.12.1"

What browsers are you seeing the problem on?

Chrome, Firefox

If other, please specify.

No response

What operating system are you using?

macOS 15.6.1（24G90）

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Thanks for reporting this, I've track this down to our collections refactor to support per node filtering: #8641. We had hoped that a ElementNode would never be accessed before it had its props set on it so that we could properly initialize what specific type of collection node it should be (Item,Header, Loader, etc) but looks like that assumption doesn't hold up. Will have to investigate to see what alternative we have here.

To note: our table with suspense story actually reproduces the issue, however the unit tests that uses the same story didn't catch this :/

[devongovett]

Fix was released in react-aria-components v1.12.2.

[azu]

Thanks.

In the reproduction repository, the issue could no longer be reproduced after updating to react-aria-components v1.12.2.
azu/react-aria-table-execption#1
https://react-aria-table-execption-git-fi-9fabfd-azus-projects-0b132089.vercel.app/

I plan to try it on the production app next week.