React-virtuoso into NextJS project

[PedroJBrito]

Hi,

I'm using react-virtuoso with nextjs and I'm facing a trick that I don't know exactly from where it comes.

I have a list rendered with virtuoso and that list is a list of comments with two types of comments, so it renders two different kinds of components with different heights. The problem I'm struggling is, when in production (just in production), when I scroll down, I want to update the url with the id of the most recent comment that was loaded, however this should be done without rerender the entire page. Turned out that in some random url updates, the page is rerender and the method for server side rendering is being called. But if I set the height of both types of comments this doesn't happen. Also, if a set the items with fixedItemHeight this also doesn't happen. I've also tried to do it without virtuoso and I don't have this error, so I believe it's related with some internals of virtuoso.

Do you have any idea why is this happening?

Thank you in advance for your help.

[haghighi251]

I got the same problem when I wanted to make a small example with a parent component in which I used virtuoso to load and show a list of users by a custom user component. The user state contains 100,000 users but I got nothing on the screen and when I checked the custom user component I realized that this component is being called just 38 times. I changed the height property by using the style attribute and also separately using TailwindCss and with these changes each time I got a different user count in the console log in the custom component. The vired thing was that the original users state in the parent component contains 100,000 users but the virtuoso is running the user component just for 30 or 40 times! I also realized that those 30 or 40 items that I can not see on the screen are in the document and I just need to open the elements tab in the browser tool then I am able to make them visible!

[haghighi251]

After some digging into the issue I solved the problem myself and here is my components in a NextJs application:

The root page component:
`
"use client";
import React, { useEffect, useState } from "react";
import { Virtuoso } from "react-virtuoso";
import { createUsersList, USER } from "./UserCreater";
import UserComponent from "./UserComponent";

const Page = () => {
const [users] = useState<Array>(createUsersList(1, 100000));

if (!users) return

Loading ...

;

return (

Users:

<Virtuoso
className="virtuoso-container" // Custom class for styling
data={users}
itemContent={(_, user) => }
overscan={200}
style={{ height: '400px', width: '100%' }}
/>

);
};

export default Page;`

The user creator component:
`export type USER = {
id: number,
name: string;
};

export const createUsersList = (from: number = 1, to: number): Array => {
return Array.from({length: to}, (_, i) => {
return {
id: i+1,
name: User${i+1}
}
});
}`

The user component:
`import React from "react";
import { USER } from "./UserCreater";

export type UserComponentProps = {
user: USER;
};

const UserComponent = ({ user }: UserComponentProps) => {
if (!user) return

There is no user to be shown

;

return (

{user.id}: {user.name}

);
};

export default UserComponent;
`

And here is the key of the problem that solve the view issue on the screen:
`.virtuoso-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
}

.item {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
min-height: 50px;
}

.virtuoso-scroller > div {
position: static !important;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}`

By doing these steps you are able to show the users list on the screen by using the leverage of virtuoso.