🛠️ VitNode is still in development! You can try it out, but it is not recommended to use it now in production.
🖌️ Themes


VitNode has react-virtuoso (opens in a new tab) lib for virtualization. It is a React component that uses virtual rendering to be efficient with large data sets. It renders only the items currently visible in the list.


This is a client component. Make sure to use it only in client code.

Example use

'use client';
import { Virtuoso } from 'react-virtuoso';
import { type ShowTopicsForumsObj } from '@/graphql/hooks';
import { ItemTopicListForum } from './item';
import { useTopicsList } from '@/hooks/forums/forum/use-topics-list';
import { Loader } from '@/components/loader/loader';
return (
    endReached={() => {
      if (hasNextPage) {
      Footer: () => {
        if (!isFetching) return null;
        return <Loader className="mt-4" />;
    itemContent={(index, data) => <ItemTopicListForum {...data} />}

Use forwardRef for components

If you want to use List component inside Virtuoso component, you should use forwardRef to avoid unnecessary re-renders for components.

import { forwardRef, useState, type CSSProperties, type ReactNode } from 'react';
import { VirtuosoGrid, type Components } from 'react-virtuoso';
const List: Components['List'] = forwardRef(
  ({ children, style }: { children?: ReactNode; style?: CSSProperties }, ref) => {
    return (
      <div className="flex flex-wrap items-center relative" style={style} ref={ref}>
List.displayName = 'List';