Not support responsive size?

[jijiseong]

Describe the bug

I use useVirtualize with useWindowSize for the responsive item size.

  const { width } = useWindowSize(); 

  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: 100,
    getScrollElement: () => parentRef.current,
    estimateSize: () => width / 10,
    overscan: 5,
  })

Even though the width is changed, columnVirtualizer doesn`t rerendered.

There is the code about the Virtualizer instance in useVirtualizerBase (/pacakges/react-virtual/src/index.tsx, line:39)

  const [instance] = React.useState(
    () => new Virtualizer<TScrollElement, TItemElement>(resolvedOptions),
  )

Even if resolvedOptions have changed, initializing the instance only once.
Is this intentional?

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/rough-tdd-4wfpkr

Steps to reproduce

Refer to codesand box

Expected behavior

When I resize the window, items should rerender with new size

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS

tanstack-virtual version

latest

TypeScript version

5.2.2

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.

[piecyk]

@jijiseong that is correct, estimateSize is not part of caching strategy, to re-create virtual items you can use,

getItemKey: React.useCallback((index) => index, [width]),

https://codesandbox.io/p/sandbox/sweet-sun-f35n4r?file=%2Fsrc%2FApp.tsx%3A17%2C5-17%2C62

[siimsams]

I'm trying to figure out how is it possible to retain the scroll position when the window or container is resized?

https://codesandbox.io/p/sandbox/quizzical-snowflake-9t5rrk?workspaceId=4639fe9e-259b-4807-83e7-6dc48e992cc6

Screen.Recording.2024-11-14.at.20.04.45.mov

I have the same issue in my app where I'm trying to figure out a case where mobile is turned on it's side. Currently this throws off the scroll position as items and screen resizes.