Optimization

[ndt080]

Does it make sense to pass element styles as props?
https://github.com/inokawa/virtua/blob/df10c04ffd67fdb70175e8e13a1e6cab1aec19a4/src/react/ListItem.tsx#L44C1-L71C4

You have a reference to an element and styles are applied to that element, as you keep track of its dimensions.
Maybe you could do something like:

    useLayoutEffect(() => {
      const elementRef = ref.current;
      if(!elementRef) return;
      
      elementRef.position = hide && isSSR ? undefined : "absolute";
      elementRef[isHorizontal ? "height" : "width"] = "100%";
      elementRef[isHorizontal ? "top" : "left"] = 0;
      elementRef[isHorizontal ? (isRTLDocument() ? "right" : "left") : "top"] = offset + 'px';
      elementRef.visibility = !hide || isSSR ? "visible" : "hidden";
        
      if (isHorizontal) {
        
        elementRef.style.display = "flex";
      }
      return style;
    }, [offset, hide, isSSR, isHorizontal]);

[inokawa]

I think there is probably no big difference. Could you try any benchmarks or metrics?

[ndt080]

The difference is how often CustomItemComponent is called and how often reconciliation occurs. I have quite heavy rendering lines, so I have to work through memoized wrappers and transfer an array of empty fragments to Virtualizer children.
In primitive cases with CustomItemComponent as a div, there shouldn't be much difference in performance.