{{ message }}
Repository navigation
Not support responsive size? #831
Description
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.
Activity
[-]Even though the `useVirtualize option` changes, useVirtualize doesn't re-render.[/-][+]Not support about responsive size?[/+][-]Not support about responsive size?[/-][+]Not support responsive size?[/+]piecyk commentedon Sep 16, 2024
@jijiseong that is correct, estimateSize is not part of caching strategy, to re-create virtual items you can use,
https://codesandbox.io/p/sandbox/sweet-sun-f35n4r?file=%2Fsrc%2FApp.tsx%3A17%2C5-17%2C62
siimsams commentedon Nov 14, 2024
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.
lucasdu4rte commentedon Jul 24, 2025
That's weird, but it worked. I was having issues because my estimateSize depended on too many states. I even tried using it as a direct useCallback in estimateSize and calling useEffect with
virtualizer.measure()with estimateSize as a dependency, but the problem persisted (only in production did it happen).I'd like to know why this behavior happens. It would make more sense for the library to accept an array of dependencies directly in the hook, rather than hiding it like this.
piecyk commentedon Jul 31, 2025
@lucasdu4rte Yeah, it’s definitely a bit unintuitive. The hook was designed this way because in most cases, people were recreating a new estimateSize function on every render. That led to unstable measurements and degraded performance, since the virtualizer treats it as a "new" estimate and may remeasure unnecessarily.
Unfortunately, there's no golden rule, maybe having explicit prop to cacheKey that would make it more clear.