How to work with nested items?

[KazimirPodolski]

I have a number of form inputs which I want to virtualize. The problems is, they span across multiple hierarchical components, and I cannot come up with a way to 1) provide correct estimateSize, 2) use getVirtualItems to actually hide the items, as their order is the order of rendering, and you cannot rely on it in React.

Consider this (virtual, but realistic) example:

const TextInput = (props) => <input ... />;

const DateInput = (props) => <input ... />;

const SomeReusableSubform = () => (
  <>
    <TextInput />
    <DateInput />
  </>
);

const AnotherReusableSubform = () => (
  <>
    <TextInput />
    {[1,2,3,4].map((num) => <TextInput />)}
  </>
);

const Form = () => {
  const virtualizer = useVirtualizer({
    count: ???,
    estimateSize: ???,
    getScrollElement: someRef
  });

  return (
    <>
      <TextInput />
      <DateInput />
      <SomeReusableSubform />
      <AnotherReusableSubform />
    </>
  );
}

How to virtualize it?

[piecyk]

Hi, don't fully understand where it's going, but virtualization works on flat list. Is this form created based on some template? then maybe you can map it also for virtualizer.

[KazimirPodolski]

The form is just an example, it could be any hierarchy of components where Items are not flat and are not available in one particular component's render.

Hi, don't fully understand where it's going, but virtualization works on flat list.

Do you say it works only on flat list?

[piecyk]

Do you say it works only on flat list?

Yes, or on each level you would need an virtualizer instance.

[KazimirPodolski]

Would multiple instances play together well if they share one parent ref? In the example Form's ref.

[tannerlinsley]

Yep. Grid virtualizers do this already.