Performance problems

[levelasquez]

Version

"version": "2.0.0-alpha.6"

Steps to reproduce

Using a Typeahead

1. Pass a big array of data to the options, like 36.000+ records
2. Try to typing fast.

Expected Behavior

Can typing correctly.

Actual Behavior

With an array of 36.000+ objects, when you are typing on the input to search something, while you are typing the cursor come back, example: you are typing "something" then the cursor come back and the result is like this "somthiegn".

This is my component:

import React, { Component } from 'react'
import { Typeahead } from 'react-bootstrap-typeahead'
import {
  Button,
  InputGroup,
  Icon,
} from '@sketchpixy/rubix'

export default class TypeaheadComponent extends Component {
  handleOnChange = (select, ref) => {
    const { handleTypeahead } = this.props

    if (select.length) {
      handleTypeahead(select)
      setTimeout(() => ref.getInstance().clear(), 0)
    }
  }

  render() {
    const {
      data,
      placeholder,
      label,
      buttonStyle,
    } = this.props

    return (
      <div className='input-group'>
        <Typeahead
          ref='typeahead'
          className='typeahead'
          labelKey={label}
          emptyLabel='No se encontraron coincidencias.'
          paginationText='Mostrar más resultados...'
          placeholder={placeholder}
          options={data}
          onChange={x => this.handleOnChange(x, this.refs.typeahead)}
        />
        <InputGroup.Button>
          <Button
            style={buttonStyle}
            disabled
            className='button-group-rigth'
          >
            <Icon glyph='icon-fontello-search' />
          </Button>
        </InputGroup.Button>
      </div>
    )
  }
}

Sorry for my bad english, i'am a spanish guy.

[ericgio]

I'll concede that there are likely to be perf issues when dealing with 36k options, but why are you loading this many items onto the client directly? It seems like you should be loading them asynchronously based on user input.

Side note: You shouldn't need a setTimeout to clear the input any more. That bug was fixed in v2.0.0-rc.1