Handling null containerRef in child component with TanStack Virtual

[bennobuilder]

When using TanStack Virtual (useVirtualizer) in a child component with a scroll container ref from a parent, the containerRef may be null on initial render. This issue is more apparent in production, as React's Strict Mode in development performs double renders, masking the problem.

To resolve:

// Parent component
const ParentComponent = () => {
  const containerRef = React.useRef<HTMLElement>(null);
  return (
    <div ref={containerRef}>
      <ChildComponent containerRef={containerRef} />
    </div>
  );
};

// Child component
const ChildComponent = ({ containerRef }) => {
  const virtualizer = useVirtualizer({
    // ... other options
    getScrollElement: () => containerRef.current,
  });

  React.useEffect(() => {
    if (containerRef.current) {
      virtualizer.measure();
    }
  }, [containerRef, virtualizer]);

  // ... rest of the component
};

This useEffect in the child component ensures the virtualizer measures correctly once the parent's containerRef is available. It's necessary because the child's initial render happens before the parent's ref is assigned, and useRef doesn't trigger re-renders on value changes.

Note: This is not really a Q&A but an issue I experienced that I wanted to document