[React Aria] [Virtualizer] [Nested components] Maximum call stack size exceeded

[kaitoukid-1412]

Provide a general summary of the issue here

Virtualizer1

Virtualizer2

CodeSandbox
https://codesandbox.io/p/sandbox/c27jpz?file=%2Fsrc%2FApp.js%3A94%2C23

// https://react-spectrum.adobe.com/react-aria/Virtualizer.html

import { useId } from 'react'
import {
  GridLayout,
  ListBox,
  ListBoxItem,
  ListLayout,
  Size,
  Virtualizer as V
} from 'react-aria-components'

const layouts = {
  grid: GridLayout,
  list: ListLayout
}

export const Virtualizer = ({
  children,
  gap,
  items,
  itemSize,
  itemStyle,
  layout
}) => {
  const id = useId()

  return (
    <div style={{ maxWidth: '100%', overflow: 'hidden', resize: 'both' }}>
      <V
        layout={layouts[layout]}
        layoutOptions={{
          gap,
          minItemSize: new Size(itemSize.width, itemSize.height),
          minSpace: new Size(gap, gap)
        }}>
        <ListBox
          aria-labelledby={id}
          className='size-full'
          items={items.map((item, id) => ({ id: id.toString(), ...item }))}
          layout={layout === 'list' ? undefined : layout}
          style={{ overflow: 'auto' }}>
          {item => (
            <ListBoxItem
              style={{ ...itemStyle, ...itemSize }}
              textValue={item.id}>
              {children(item)}
            </ListBoxItem>
          )}
        </ListBox>
      </V>
    </div>
  )
}

🤔 Expected Behavior?

`

😯 Current Behavior

`

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

`

Version

1.8.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

W11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[kaitoukid-1412]

i forgot add class size-full
https://v3.tailwindcss.com/docs/size

but still have the same error :v

[snowystinger]

I cannot view the sandbox, I think you need to make it public

[kaitoukid-1412]

I made it public 😅
https://codesandbox.io/p/sandbox/c27jpz

[yihuiliao]

Mind expanding what your specific use case is for wanting to nest virtualized components?

[snowystinger]

One thing to note, you're not actually virtualizing yet. You need to change to have a defined height for the virtualizer

export default () => (
  <div style={{ height: "calc(100vh -  40px)" }}>
    <Virtualizer1 />
  </div>
);

Otherwise it'll just continue happily rendering everything, negating benefit of a virtualizer

It may be easier to debug if you bring the numbers down to 1 item in each one if you are wanting to look into it as well

[kaitoukid-1412]

Hi @snowystinger

I set div height and reduce item to visible but still get same error

<Virtualizer3/> only one element inside another element

[snowystinger]

Mind expanding what your specific use case is for wanting to nest virtualized components?

And can you answer this more?

[kaitoukid-1412]

Mind expanding what your specific use case is for wanting to nest virtualized components?

And can you answer this more?

Boolean(~~0) 👍

[snowystinger]

Thanks, to be transparent, this is not a priority for us as we have no use cases for this at the moment. If you want priority on it, you'll need to drive it.

Keep in mind, it's likely to have a number of performance issues since each rendered virtualizer's contents would need to be rendered into fake dom in order to build the nested collection. This can get slow if there are 1e5x1e5 items (if this is representative of the real world situation you have) and they are being unmounted and remounted during scroll.

If one of the sets of collections doesn't need to be virtualized, that'd probably be the best route to take.

[kaitoukid-1412]

Thanks for your support @snowystinger