Collection is not built when `React.Activity` is set to `visible` the first time

[ali-idrizi]

Provide a general summary of the issue here

I was trying out the new <React.Activity> and came across an issue with collections not rendering anything the first time the mode is set to visible from hidden. Here's a screen recording of the issue:

2025-11-12.09-48-03.mp4

Also tried with @react-aria/collections version 3.0.0-nightly-2485ffa1b-251111, and the issue is present.

🤔 Expected Behavior?

The collection should be correctly built when the mode is set to visible.

😯 Current Behavior

The first time the mode is set to visible nothing is rendered and the collection.size is 0.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Here's a super minimal reproduction https://codesandbox.io/p/devbox/zen-platform-tjfns7

Version

3.0.0

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

N/A

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for reporting this, I've opened a draft PR which can reproduce the issue in a test.
#9176

[nwidynski]

@snowystinger Gut feeling is probably the style implementation of ElementNode not having been adjusted for Activity also applying display: none, causing it to think we are in a suspended render.

[snowystinger]

thanks @nwidynski , unfortunately, the code path doesn't appear to go through either the getter or setter. We do go through setProps above after hidden->visible, and when we do the node isConnected=true and isHidden=false.

It seems more like something is happening where the cloned collection is old maybe? I haven't determined a good way to verify what's going on and my knowledge of how Activity is implemented is not the best yet

[chirokas]

I guess this is what happens:

When an Activity boundary is hidden during its initial render, the Effects of its children are not mounted.
https://github.com/facebook/react/blob/257b033fc7b0518e7b1db32ca24e2354933b9d0e/packages/react-reconciler/src/__tests__/Activity-test.js#L200

Consequently, during the mount phase, neither updateStoreInstance nor setProps is called, so collection.size is 0.
https://github.com/facebook/react/blob/257b033fc7b0518e7b1db32ca24e2354933b9d0e/packages/react-reconciler/src/ReactFiberHooks.js#L1706-L1720

When hidden→visible, React updates the store via updateSyncExternalStore. However, since the getSnapshot reference remains unchanged and setProps has not yet been executed to update the collection, React does not schedule updateStoreInstance to update the collection.
https://github.com/facebook/react/blob/257b033fc7b0518e7b1db32ca24e2354933b9d0e/packages/react-reconciler/src/ReactFiberHooks.js#L1776-L1790

Workaround:

// useCollectionDocument
const [, forceStoreRerender] = useState(collection)
// https://github.com/facebook/react/blob/257b033fc7b0518e7b1db32ca24e2354933b9d0e/packages/react-reconciler/src/ReactFiberHooks.js#L1837
useLayoutEffect(function updateStoreInstance() {
  const prevValue = collection
  const nextValue = getSnapshot()
  if (!Object.is(prevValue, nextValue)) {
    forceStoreRerender(nextValue)
  }
}, [])

[nwidynski]

@chirokas Hm, do you know why setProps isn't called in the mount phase? Docs for Activity mention effects not being mounted, but setProps is invoked in a callback ref.

[devongovett]

I think refs are considered an effect. It makes sense because DOM nodes are also not mounted, so there'd be nothing to attach the ref to.

[nwidynski]

@devongovett I'm not sure I understand why DOM nodes are not being mounted. I thought the point of Activity was that the DOM is still present to later be restored?

[chirokas]

do you know why setProps isn't called in the mount phase?

FYI:
Refs are treated as layout effects.
https://github.com/facebook/react/blob/fb2177c153353621c5e343b0386993e5084f641e/packages/react-reconciler/src/ReactFiberCommitWork.js#L782-L802

When switching from hidden to visible, reappearLayoutEffects attaches the refs.
https://github.com/facebook/react/blob/fb2177c153353621c5e343b0386993e5084f641e/packages/react-reconciler/src/ReactFiberCommitWork.js#L3179

[nwidynski]

@chirokas Thanks for digging that up! I see that it's basically just an OffscreenComponent under the hood, so equivalent of a component entering Suspense with the intention of reusing the DOM later on. In that scenario refs are also cleaned up when entering the suspension, so I guess it makes sense that React bails out of attaching refs in the first place here.

[mhornbacher]

Hey gang! Is anyone actively working on this? Its a major blocker for a project I am building using Cache Components on Next 16 as the router switches to using <Activity /> to persist route state between navigations.

If not would it be ok if I picked it up for a bit and took a shot at it?

(see https://nextjs.org/docs/app/getting-started/cache-components#navigation-uses-activity)

[snowystinger]

Go ahead and have a go at it, there's a test in fix: collections inside Activity #9176

[mhornbacher]

@snowystinger the workaround @chirokas proposed works great!

I added a few optimizations to prevent the layout effect doing repeated work on renders after the initial activities load but otherwise after spending a good 2 hours in the debugger, and perhaps I am missing something, the on visible 1 time re-render is required to populate the useSyncExternalStore.

That said we can avoid re-computing the collection by simply checking if there are any elements and skipping the effect.

I opened the change as a PR at [#9298]