React-select: [V2] MenuList being re rendered when hovering over the options

[avivshafir]

The new v2 version looks awesome! I love the css-in-js with emotion and the components API.
So first many thanks for maintaing this library!

I am trying to integrate virtualization, similar to the react-select-virtualized library,
I provided the select component my custom MenuList component, which is re rendered on every hover over the options, causing lags and slow scrolling behaviour.

here is a demo:
https://codesandbox.io/s/qko9vw1yzw

Is this a bug or am I missing something?

[jprosevear]

I took the same tactic with react-virtualized (providing an menu list component) and am also struggling to get the rendering correct.

[jprosevear]

@avivshafir one thing I've noticed is that you don't need to put the VirtualList inside a MenuList component, so far it seems you can use VirtualList directly

[avivshafir]

@jprosevear you can but the component is still being re rendered causing a performance problem,
when I add this code to the component

shouldComponentUpdate() {
    return false;
  }

the MenuList component will not re render but I there are still significant lags and the browser console prints

[Violation] 'scroll' handler took 298ms
[Violation] 'mouseover' handler took 161ms

[Lolobstant]

Hello, i was just wandering, do you have any idea on how this would work with nested option groups ?

[Janpot]

It seems to get a little better when you move up the React.Children.toArray like so:

class MenuList extends React.Component {
  render() {
    console.log("rendering menu list...");
    const children = React.Children.toArray(this.props.children);
    return (
      <VirtualList
        width="100%"
        height={300}
        itemCount={children.length} // you also want to use it here
        itemSize={35}
        renderItem={({ index, style }) => {
          console.log("rendering index: " + index);
          return (
            <div key={index} style={style}>
              {children[index]}
            </div>
          );
        }}
      />
    );
  }
}

https://codesandbox.io/s/jn6onxmn7y

[avivshafir]

@Janpot Thanks, I think it really improved the performance...
The scrolling is much more smooth and I am not getting the browser Violation messages anymore.

[Janpot]

The scrolling is a lot better for me, but the hover effect still has quite some lag, as well as typing

[yotov]

Also keyboard up and down doesn't work

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!