Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not support responsive size? #831

Open
2 tasks done
jijiseong opened this issue Sep 5, 2024 · 1 comment
Open
2 tasks done

Not support responsive size? #831

jijiseong opened this issue Sep 5, 2024 · 1 comment

Comments

@jijiseong
Copy link

jijiseong commented Sep 5, 2024

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.
@jijiseong jijiseong changed the title Even though the useVirtualize option changes, useVirtualize doesn't re-render. Not support about responsive size? Sep 5, 2024
@jijiseong jijiseong changed the title Not support about responsive size? Not support responsive size? Sep 5, 2024
@piecyk
Copy link
Collaborator

piecyk commented Sep 16, 2024

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants