React-select: React-Select gets slow with 1000++ data

[samyan]

I'm trying to list the cities the component gets very slow.

Test case (ALREADY FIXED EXAMPLE):
https://codesandbox.io/s/qly29opky4

[samyan]

Caused by onMouseMove / onMouseOver

Solution: https://github.com/JedWatson/react-select/issues/3128#issuecomment-439207355

function Option(props: any) {
    // Fix
    const { onMouseMove, onMouseOver, ...newInnerProps } = props.innerProps

    return (
        <MenuItem
            buttonRef={props.innerRef}
            selected={props.isFocused}
            component="div"
            style={{
                fontWeight: props.isSelected ? 500 : 400,
            }}
            {...newInnerProps}
        >
            {props.children}
        </MenuItem>
    );
}

[ImSirDieALot]

In the example you provided, I do not see the slowing issue. It's loading up with in 1/10 of a second with all the options. I scrolled down fast too.

[samyan]

In the example you provided, I do not see the slowing issue. It's loading up with in 1/10 of a second with all the options. I scrolled down fast too.

You are tring already fixed example...

[ImSirDieALot]

In the example you provided, I do not see the slowing issue. It's loading up with in 1/10 of a second with all the options. I scrolled down fast too.

You are tring already fixed example...

My bad, I saw the issue was open so tried to check it out.

[samyan]

In the example you provided, I do not see the slowing issue. It's loading up with in 1/10 of a second with all the options. I scrolled down fast too.

You are tring already fixed example...

My bad, I saw the issue was open so tried to check it out.

No problem. Thanks for reply!

[samyan]

Hello, No, only mouse over props.

Regards.

El 30 jun. 2019 10:50, Yarin Dekel [e-mail] escribió:
I'm trying to list the cities the component gets very slow.
Test case (ALREADY FIXED EXAMPLE):
https://codesandbox.io/s/qly29opky4

This is the exact select I need to implement:) and in your fixed component, the performance is great. Did you do anything else beside the mouse over props in Option ?

—You are receiving this because you modified the open/close state.Reply to this email directly, view it on GitHub, or mute the thread.