[v3.0.0-beta.63] Items not displayed in SSR with "useWindowVirtualizer" #599

Activity

1. piecyk commented on Oct 6, 2023

   

   piecyk

   on Oct 6, 2023

   Last edited by piecyk

   Collaborator

   More actions

   @raskyer can you create codesandbox example? I think issue here is that you are passing scroll element via ref, if you store it on state then it should work, also for SSR you can specify initialRect.
2. raskyer commented on Oct 6, 2023

   

   raskyer

   on Oct 6, 2023

   Author

   More actions

   I have difficulties to create sandbox right now (codesandbox seems down).
   But my component do not use ref or parent :

   import type { ReactElement } from 'react';
   
   import { Box } from '@mui/material';
   import { useWindowVirtualizer } from '@tanstack/react-virtual';
   
   interface Props {
     count: number;
     estimateSize: number;
     render: (index: number) => ReactElement;
   }
   
   export function WindowVirtualizedList({ count, estimateSize, render }: Props) {
     const virtualizer = useWindowVirtualizer({
       count,
       estimateSize: () => estimateSize,
       overscan: 2,
     });
   
     return (
       <Box
         sx={{
           position: 'relative',
           width: '100%',
           height: virtualizer.getTotalSize(),
         }}
       >
         {virtualizer.getVirtualItems().map((item) => {
           return (
             <Box
               key={item.key}
               sx={{
                 position: 'absolute',
                 width: '100%',
                 height: item.size,
                 transform: `translateY(${item.start}px)`,
               }}
             >
               {render(item.index)}
             </Box>
           );
         })}
       </Box>
     );
   }

   It was working without any issue at 60. But have an issue since 61, 62 or 63.

   👍React with 👍1Reacted by Kevin
3. piecyk commented on Oct 6, 2023

   

   piecyk

   on Oct 6, 2023

   Collaborator

   More actions

   But my component do not use ref or parent :

   ooo true, as it's Window

   I have difficulties to create sandbox right now (codesandbox seems down).

   yep, codesandbox is getting really slow lately, managed to create this https://codesandbox.io/p/sandbox/busy-feistel-hdtxsr ( using the official template ). Not up to date with next stuff but this kinda looks ok.

   It was working without any issue at 60. But have an issue since 61, 62 or 63.

   hmm, this is bit surprising as 61 should not affect this, but 63 yes, as we changed to don't return empty items when the size of scroller is 0.

   I would say that virtualizer don't know that it's on client side now and should re-render, as we only watch resize events. For quick fix you can try force re-render in effect.

   const [, forceUpdate] = React.useState({});
   useEffect(() => {
     forceUpdate({})
   }, [])
4. raskyer commented on Oct 6, 2023

   

   raskyer

   on Oct 6, 2023

   Author

   More actions

   yep, codesandbox is getting really slow lately, managed to create this https://codesandbox.io/p/sandbox/busy-feistel-hdtxsr ( using the official template ). Not up to date with next stuff but this kinda looks ok.

   Could not access it, unfortunatly.

   hmm, this is bit surprising as 61 should not affect this, but 63 yes, as we changed to don't return empty items when the size of scroller is 0.

   3.61 is fine too (just tested it right now)
5. piecyk commented on Oct 7, 2023

   

   piecyk

   on Oct 7, 2023

   Collaborator

   More actions

   @raskyer can't really reproduce it, looks ok with next 12 https://codesandbox.io/s/late-fog-qqjs5v?file=/pages/index.js

   as mention above, by adding initialRect, the rows will be render also on server.
6. raskyer commented on Oct 7, 2023

   

   raskyer

   on Oct 7, 2023

   Author

   More actions

   @piecyk Can you create the same example with remix 1.19.3 ?

   I don't think it has anything to do with remix / next but that would be cool to try in the same conditions.

   I struggle alot trying to do this in codesandbox (really buggy).
7. raskyer commented on Oct 7, 2023

   

   raskyer

   on Oct 7, 2023

   Author

   More actions

   Ok, here the mini repo : https://github.com/raskyer/virtual-bug

   It happen when there is 1 element in count.

   👍React with 👍1Reacted by Damian Pieczynski
8. piecyk

   closed this as completedin #603on Oct 8, 2023
9. piecyk commented on Oct 9, 2023

   

   piecyk

   on Oct 9, 2023

   Collaborator

   More actions

   @raskyer should be fixed in latest beta.