Ограничить загрузку опций (реагировать на выбор) при вводе первых трех символов для более быстрого отклика

Question

Здесь я пытаюсь загрузить опции только после того, как пользователь введет первые 3 символа, так что можно управлять проблемой загрузки огромного списка опций при каждом вводе символа.

render(){
let options = arrayName.map(name => {
      return { value: name.name, label: name.name };
    })

return(
<Select
                openMenuOnFocus={false}
                openMenuOnClick={false}
                options={options}
                value={this.state.inputValue}
                onChange={this.handleChange}
                placeholder="Please Enter 3 Characters..."
              />
     )
}

Итак До сих пор я использовал «openMenuOnFocus = {false} и openMenuOnClick = {false}», который хорошо работает, сначала не показывая раскрывающийся список, но я хочу позволить пользователю ввести 3 символа, а затем загрузить только раскрывающийся список с огромным списком, извлеченным из API.

В противном случае это замедляет производительность моего приложения.

Пожалуйста, предложите несколько наилучших возможных способов уменьшения времени отклика.

Answer 1

Я думаю, что лучшее решение - отменить вызов API, а не отправлять его только тогда, когда пользователь отправляет текст не менее 3 символов:)

Прежде всего, используйте версию asyn c ofact-select и затем loda sh debounce

При debounce вызов API будет выполняться только в том случае, если истекшее время между событиями нажатия клавиши больше, чем второй аргумент функции debounce.

Надеюсь, это может быть полезно:)