Limiting number of options rendered in dropdown

[h3rmanj]

Continuation of #126, which got closed when react-select moved from v1 (?).

There should be a way to limit the number of options that are rendered to avoid sluggish (at best, even with high-end PCs) behavior when dealing with large lists.
Example: https://codesandbox.io/s/react-codesandboxer-example-forked-sijty

The workaround posted in #126 (comment) no longer works, and this needs to be addressed again.

I've made a PR in #4515 (which is a spiritual successor to #2611, also closed due to being v1), that simply adds a prop to limit the amount of options rendered. That solution might be too simple though, but I'm creating a feature request so it can be discussed here.

This issue also addresses the root cause of #4504

[ebonow]

Greetings @h3rmanj and sorry for the late reply.

I could be missing something but you should be able modify your MenuList component to handle this.

Codesandbox demo

const MenuList = ({ children, ...props }) => {
  return (
    <components.MenuList {...props}>
      {Array.isArray(children) 
        ? children.slice(0, props.selectProps?.maxOptions) /* Options */
        : children /* NoOptionsLabel */
       }
    </components.MenuList>
  );
};

<Select components={{ MenuList }} maxOptions={5} />

[h3rmanj]

Thanks! That seems like a good solution to me.

I do still think it needs to be "officially" addressed though. I know this is a common problem in projects in my company. Reading through #127 and other issues, it seems like something many devs run into as well.

So if it's not going to be supported in a prop, I'd still like to see a suggested solution in the docs.

I'll close my two PR's though since there is a major rewrite in progress.

[rafaelquintanilha]

Greetings @h3rmanj and sorry for the late reply.

I could be missing something but you should be able modify your MenuList component to handle this.

Codesandbox demo

const MenuList = ({ children, ...props }) => {
  return (
    <components.MenuList {...props}>
      {Array.isArray(children) 
        ? children.slice(0, props.selectProps?.maxOptions) /* Options */
        : children /* NoOptionsLabel */
       }
    </components.MenuList>
  );
};

<Select components={{ MenuList }} maxOptions={5} />

@ebonow thanks for your solution. While this works for limiting the number of options displayed, filterOption will run nonetheless. That means that in large datasets with any kind of filtering, even if we are limiting to only a subset of the options, it will still be computationally expensive.

In the past, I solved this issue by limiting how many times filterOption can run, but now this function is being called multiple times per option (as correctly pointed by @h3rmanj in another PR) and this solution no longer works.

Any plans (or ideas) to address this issue?

[alamothe]

@ebonow The solution works but it is inefficient, since all options will still be rendered, even though almost all of them are discarded.

[fkaempfer]

I simply used an async select (https://react-select.com/async) as a workaround to limit results. it works quite well and is efficient.

However limiting the number of options displayed at a time would certainly be useful

[langarus]

@ebonow @h3rmanj This is nice a nice workaround.

I'm trying to implement it in TS, but found issues when trying to force the Select component to accept maxOptions as a prop.

This is how the TS implementation looks like for MenuList component:

type T = MenuListProps<
  {
    label: string;
    value: string;
  },
  true,
  GroupBase<{
    label: string;
    value: string;
  }>
> & { selectProps: MenuListProps['selectProps'] & { maxOptions: number } };

const MenuList = ({ children, ...props }: T) => {
  return (
    <components.MenuList {...props}>
      {
        Array.isArray(children)
          ? children.slice(0, props.selectProps?.maxOptions) // Options
          : children // NoOptionsLabel
      }
    </components.MenuList>
  );
};

No idea how to make it. For now maybe just wrap the whole component in another one that accepts the maxOptions and pass it directly in MenuList.