Re-rendered if parent's width is changed

[Yeenot]

Describe the bug

Hello. Thank you for this really great package. I would like to address some issue/fix (if it is).

The grid is being re-rendered every time the parent's width is changed (Even if not a direct parent node) and affects CSS transitions. Please help me :(

Your minimal, reproducible example

None

Steps to reproduce

Example:

1. The page has a sidebar menu and a main container
2. Toggle sidebar menu and the main container's width is being changed.
3. Every time this happens (chore: correct output name #2), the grid (rows/columns) are being re-rendered. Even though I have set a width to the grid's container to ensure the size and visible ranges are not being changed.
4. Sidebar CSS transition is laggy due to heavy render.

Expected behavior

I expected it to be to not render since there are no changes in visible ranges (Including overscan).

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS - Chrome

tanstack-virtual version

v3.0.0-beta.2

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[henrikq]

We are experiencing something like sounds like this.

The orthogonal (width) changes causes the row heights to change, but translateYs doesn't update, even if we force a re-render.

We are still on 2.9.0 though, so maybe there already is a fix?

[henrikq]

I solved it as following

  const [tableRect, tableRef] = useBoundingClientRectRef(['width']);
  const width = Math.round(tableRect?.width);
  useEffect(() => rowVirtualizer.measure(), [rowVirtualizer, width]);

useBoundingClientRectRef is a hook version of ResizeObserver, MutationObserver and getBoundingClientRect.