Performance issues

[ksdme]

This library suffers from the same issues as react-select in terms of performance. It turned out to be deal-breakingly slow for little over 400 options. However, the following fixes/hacks helped me improve its performance significantly.

import { Box, Button, useMultiStyleConfig } from "@chakra-ui/react"
import {
  MenuListProps,
  OptionProps,
  Select as ReactSelect,
  createFilter,
  chakraComponents,
} from "chakra-react-select"
import React, { useMemo, useState } from "react"

// The default option component adds event listeners for hover effect which makes it slow.
// https://github.com/JedWatson/react-select/issues/3128#issuecomment-451936743
function CustomOption<O>(props: OptionProps<O>) {
  const {
    onMouseMove,
    onMouseOver,
    ...rest
  } = props.innerProps

  const updatedProps = {
    ...props,
    innerProps: rest,
  }

  // TODO: What is the actual type of defaultMenuItemStyle?
  const defaultMenuItemStyle: any = useMultiStyleConfig("Menu").item

  return (
    <chakraComponents.Option
      {...updatedProps}
      selectProps={{
        ...updatedProps.selectProps,
        chakraStyles: {
          option: (initialSx) => ({
            ...initialSx,
            // Apply the hover styling using CSS instead.
            _hover: defaultMenuItemStyle._focus,
          })
        },
      }}
    />
  )
}

// Do not render all the results, instead, show the first few and render a show all button.
// https://github.com/JedWatson/react-select/issues/3128#issuecomment-536697376
function CustomMenuList<O>(props: MenuListProps<O>) {
  const [
    showAll,
    setShowAll,
  ] = useState(false)

  const children = useMemo(() => {
    return React.Children.toArray(props.children)
  }, [
    props.children,
  ])

  const cutoff = (
    !showAll
    && children.length > 50
  )

  return (
    <chakraComponents.MenuList {...props}>
      {
        cutoff
          ? children.slice(0, 50)
          : props.children
      }
      {cutoff && (
        <Box mx="2">
          <Button
            w="full"
            variant="ghost"
            fontWeight="normal"
            onClick={() => setShowAll(true)}
          >
            Show all results
          </Button>
        </Box>
      )}
    </chakraComponents.MenuList>
  )
}

// The upstream chakra-react-select component is really slow when you have more than a couple of options.
// This components applies various optimizations to make it perform fast enough in most cases.
// https://github.com/JedWatson/react-select/issues/3128
export function Select(props: Parameters<typeof ReactSelect>[0]) {
  return (
    <ReactSelect
      variant="filled"
      components={{
        Option: CustomOption,
        MenuList: CustomMenuList,
      }}
      filterOption={createFilter({
        trim: false,
        ignoreCase: true,
        ignoreAccents: true,
      })}
      {...props}
    />
  )
}

As a middle ground between being compliant with react-select and being performant, it might make sense to introduce a new component with these hacks and maybe more.

Thoughts?

[csandman]

Overall, the goal of this library is not to modify the base behavior of react-select in any way that doesn't have to do specifically with Chakra. The idea was that I'd style it to match the rest of the styles of the Chakra UI lib, including sizes and variants, and make it behave more like a chakra input by integrating with the form control. Past that, I left it open to be customized (almost) as much as the original react-select is, giving people the ability to make these choices on their own. I also try and give examples of how people can make those customizations on their own (such as integrating with form libraries) as often as I can.

In most cases, I don't use this package with more than 30-50 options, so I completely avoid the performance bottleneck. Removing some of the features react-select offers by default for the case of performance that only helps some doesn't really make sense IMO, as people can implement those customizations on their own. Especially when, like in your example above, the customization breaks the built in behavior of arrow navigation vs hovering. You can see what I mean in this example, if you hover over an item, it's supposed to reset the current focus index for using the up and down arrows to navigate, but in the case of you custom version, that behavior breaks.

So I'm happy for people to share their customizations that might help others, but I don't plan to implement those in the package itself. My main goal is to make an example for people using @tanstack/virtual to virtualize a list of options, as virtualization will definitely offer the best performance advantages for a list of pretty much any size, but I've been struggling to get it working.

[csandman]

I have some other comments on performance stuff here, so I'll drop a link in case anyone comes across this: #156

[ffaubert]

@csandman Thank you for making such a great package! Have you had any luck putting an example together with @tanstack/virtual?

[csandman]

@csandman Thank you for making such a great package! Have you had any luck putting an example together with @tanstack/virtual?

I've attempted it a couple times but haven't had much luck. There's always been something that didn't quite work right. There are a few other packages out there that have already done it, but they're mostly using outdated versions of react select, and older virtualization libs. A friend of mine made some attempts as well, and you can check out of them here: https://codesandbox.io/s/z9jcin but he also couldn't get all of the kinks worked out.

Here are some of the other examples of looked at using the original package:

• https://www.npmjs.com/package/react-virtualized-select
• https://www.npmjs.com/package/react-windowed-select

And that's all I can really offer for now. I recently started a new job and really haven't had much free time to focus on this project besides maintenance.