How to virtualize react-select?

[ankitjena]

Hey guys,

I started using the react-select package a few days back. Right now is I have almost 2k items to show in the select(which is rendered multiple times in a dynamic form). So I want to virtualize the select component I made.

I am using react-virtual, but facing issues in this. When trying to render the select with virtualItems I am only getting two items.

import * as Select from '@radix-ui/react-select';
import { DropdownArrowIcon } from 'components/Icons';
import { classNames } from 'Helpers/functions/common';
import { forwardRef, ReactNode, Ref, useCallback, useRef, useState } from 'react';
import { useVirtual } from 'react-virtual';

type SelectNewProps = {
  items: Array<{
    value: string;
    label?: string;
    node?: ReactNode;
  }>;
  contentWidth?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
};

export const SelectNew = forwardRef(
  ({ items, contentWidth, defaultValue, onChange }: SelectNewProps, ref) => {
    const [selectValue, setSelectValue] = useState(defaultValue);

    const scrollRef = useRef();
    console.log(items.length);
    const rowVirtualizer = useVirtual({
      size: items.length,
      parentRef: scrollRef,
      estimateSize: useCallback(() => 50, []),
    });


    return (
      <div ref={ref as Ref<HTMLDivElement>}>
        <Select.Root
          defaultValue={defaultValue}
          value={selectValue}
          onValueChange={(value) => {
            setSelectValue(value);
            onChange(value);
          }}
        >
          <Select.Trigger className="flex justify-between w-full px-4 py-3 border rounded text-tw-black-7 border-tw-gray-c">
            <Select.Value />
            <Select.Icon>
              <DropdownArrowIcon className="fill-current " />
            </Select.Icon>
          </Select.Trigger>

          <Select.Content
            className={classNames('px-2 h-60 overflow-auto bg-white rounded shadow', contentWidth)}
            ref={scrollRef}
          >
            <Select.ScrollUpButton className="grid w-full h-8 bg-white cursor-pointer hover:bg-tw-gray-f9 place-items-center">
              <DropdownArrowIcon className="text-black transform rotate-180 fill-current" />
            </Select.ScrollUpButton>
            <Select.Viewport
              className="relative w-full"
              style={{ height: `${rowVirtualizer.totalSize}px` }}
            >
              {rowVirtualizer.virtualItems.map((item, index) => {
                return (
                  <Select.Item
                    className="p-2 cursor-pointer hover:bg-tw-gray-f9"
                    key={index}
                    value={items[index].value}
                  >
                    <Select.ItemText>
                      {items[index].node ? items[index].node : items[index].label}
                    </Select.ItemText>
                  </Select.Item>
                );
              })}
            </Select.Viewport>
            <Select.ScrollDownButton className="grid h-8 bg-white cursor-pointer hover:bg-tw-gray-f9 place-items-center">
              <DropdownArrowIcon className="text-black fill-current" />
            </Select.ScrollDownButton>
          </Select.Content>
        </Select.Root>
      </div>
    );
  }
);

I stumbled upon this issue which says to follow the examples properly, which I tried to do. But still getting the issue.

Is there something I am doing wrong. Otherwise, is there some recommended/opinionated way of virtualizing I might be unaware of. Also, what else can be done to improve the performance of the component. Thanks for the help in advance.

[benoitgrelard]

Hi @ankitjena,

We haven't looked at all at virtualisation yet as in general it should be a last resort situation.

For example, in your case, I think having 2000 items to chose from is really not great UX, and with that many items, it's highly unlikely you will find any custom component that will be as performant as a native UI on all platforms.

May I ask what selection your user are supposed to make?

✌️

[ankitjena]

Hey @benoitgrelard, sorry for the late reply.

Regarding your question, the user would be selecting from the list of events they have fired. There will also be a search in the component to make the UX easier.

[benoitgrelard]

We don't currently support a searchable Select, perhaps eventually a Combobox (#1342) might suit you better.
In the meantime, aren't there ways users could filter down the list before-hand?

[ankitjena]

@benoitgrelard The combobox looks like what will work for us, so what we have is a dynamic form where users can create a csv(so map a event or a property) to a value.

so there can be multiple of this, which is why the performance matters here. What would you suggest as a better UX?

[jtabone16]

I was actually able to figure out a workaround here. Set onOpenChange to rowVirtualizer.measure and handle displaying the selected value yourself by using the following:

    <Select.Trigger>
      <Select.Value>
         {selectedValue} //I threw mine in a span
      </Select.Value>
      <Select.Icon />
    </Select.Trigger>

cc @ankitjena