statutory-emerald

Recursive structure

Is it possible to use the virtualizer without looping over the virtual items? My items is in a recursive structure but the resulting dom elements are flattened. But I'm not sure how to figure out what item should be rendered without using getVirtualItems() function.

4 Replies

quickest-silver•2y ago

hmm don't fully understand the question, getVirtualItems will return items for current offset and size of view port

statutory-emeraldOP•2y ago

I have a recursive tree structure of react components but by using Fragments the resulting DOM elements are flat. Problem is I cant loop over getVirtualItems to find out if the item should be rendered or not but I probably need to call some function from within the item component that checks if it should be rendered or not maybe getVirtualItemForOffset() could work? is offset the distance from the top of the list?

quickest-silver•2y ago

one option is to return 0 in estimateSize for those indexes that should be hidden, then just loop over items, and return null for those that have size 0

statutory-emeraldOP•2y ago

Not sure I follow. So I have this type of tree structure

      <TreeView>
        <TreeViewItem id="src">
          <TreeViewItemContent>
            <FontAwesomeIcon icon={["fal", "folder-closed"]} />
            src
          </TreeViewItemContent>
          <TreeViewSubTree>
            <TreeViewItem id="src/Avatar.tsx">
              <TreeViewItemContent>
                <FontAwesomeIcon icon={["fal", "folder-closed"]} />
                Avatar.tsx
              </TreeViewItemContent>
            </TreeViewItem>
          </TreeViewSubTree>
        </TreeViewItem>
      </TreeView>

      <TreeView>
        <TreeViewItem id="src">
          <TreeViewItemContent>
            <FontAwesomeIcon icon={["fal", "folder-closed"]} />
            src
          </TreeViewItemContent>
          <TreeViewSubTree>
            <TreeViewItem id="src/Avatar.tsx">
              <TreeViewItemContent>
                <FontAwesomeIcon icon={["fal", "folder-closed"]} />
                Avatar.tsx
              </TreeViewItemContent>
            </TreeViewItem>
          </TreeViewSubTree>
        </TreeViewItem>
      </TreeView>

But because of the use of Fragments in the components the resulting DOM structure will be flat and look something this:

<div
  role="tree"
  tabindex="0"
  data-orientation="vertical"
>
  <div role="treeitem" id="src" aria-level="1">...</div>
  <div role="treeitem" id="src/Avatar.tsx" aria-level="2">...</div>
  <div role="treeitem" id="src/Avatar2.tsx" aria-level="3">...</div>
  <div role="treeitem" id="alsobob.tsx" aria-level="3">...</div>
  <div role="treeitem" id="bob.tsx" aria-level="1">...</div>
  <div role="treeitem" id="bobby.tsx" aria-level="1">...</div>
</div>

<div
  role="tree"
  tabindex="0"
  data-orientation="vertical"
>
  <div role="treeitem" id="src" aria-level="1">...</div>
  <div role="treeitem" id="src/Avatar.tsx" aria-level="2">...</div>
  <div role="treeitem" id="src/Avatar2.tsx" aria-level="3">...</div>
  <div role="treeitem" id="alsobob.tsx" aria-level="3">...</div>
  <div role="treeitem" id="bob.tsx" aria-level="1">...</div>
  <div role="treeitem" id="bobby.tsx" aria-level="1">...</div>
</div>

And a list shouldn't be a problem to virtualize right? But the problem lies in that I don't think i can simply loop over getVirtualItems to figure out which TreeItems to render or not. Maybe if i pass the entire array of VirtualItems down to the TreeItems themselves using context and then each tree item could be responsible for checking if it should render or not. Doesn't feel super performant though

Gaming

Programming

Recursive structure

Did you find this page helpful?