If my items are not dynamic in TableVirtuoso, and I already know the height of each item.How can I improve the render performance?

[HellowVirgil]

I have the map of each item hieght.

const map = {
  0: 20,
  1: 30,
  2: 30,
  3: 25
}

I use TableVirtuoso like this,

<TableVirtuoso
  defaultItemHeight={20}
  itemSize={el => {
    if (el.dataset.index === undefined) return 20;

      const index = parseInt(el.dataset.index);

      return map[index];
  }}
/>

If the item component is really complicated, how can I improve the render performance?

There are some ideas in this case:

1. ignore bind resize observer
2. render item container in advance, defer render item

Do you have any other idea?

Thank you :)

[petyosi]

My recommendation would be to profile the rendering with the react dev tools and see what's the actual bottleneck. The resize observing is not for free, but I doubt disabling it would do miracles.

Depending on your user behavior, you may try your luck with the scroll seek placeholders. They are non-trivial for a setup, but since you know your item size, you should be ok.

[HellowVirgil]

I debug with the dev tools find there has a long task with function call.

And it is in useSize.

The source code is:

export function useSizeWithElRef(callback: (e: HTMLElement) => void, enabled = true) {
  const ref = React.useRef<CallbackRefParam>(null)

  let callbackRef = (_el: CallbackRefParam) => {
    void 0
  }

  if (typeof ResizeObserver !== 'undefined') {
    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
      const element = entries[0].target as HTMLElement
      if (element.offsetParent !== null) {
        callback(element)
      }
    })

    callbackRef = (elRef: CallbackRefParam) => {
      if (elRef && enabled) {
        observer.observe(elRef)
        ref.current = elRef
      } else {
        if (ref.current) {
          observer.unobserve(ref.current)
        }
        ref.current = null
      }
    }
  }

  return { ref, callbackRef }
}

When enabled is true, the items still has resize observing, so I think it would be changed like:

export function useSizeWithElRef(callback: (e: HTMLElement) => void, enabled = true) {
  const ref = React.useRef<CallbackRefParam>(null)

  let callbackRef = (elRef: CallbackRefParam) => {
    if (elRef) {
      callback(elRef)
      ref.current = elRef
    } else {
      ref.current = null
    }
  }

  if (typeof ResizeObserver !== 'undefined' && enabled) {
    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
      const element = entries[0].target as HTMLElement
      if (element.offsetParent !== null) {
        callback(element)
      }
    })

    callbackRef = (elRef: CallbackRefParam) => {
      if (elRef) {
        observer.observe(elRef)
        ref.current = elRef
      } else {
        if (ref.current) {
          observer.unobserve(ref.current)
        }
        ref.current = null
      }
    }
  }

  return { ref, callbackRef }
}

[HellowVirgil]

And when I already knew the item size, I need to make enable become false.

[petyosi]

Feel free to fork and experiment with your setup - happy to review a PR. Notice that there's a property called fixedItemHeight that does a bit of a shortcut in the internals of the component.