Как сделать автозаполнение быстрее и плавнее в React / Redux?

Question

Я реализовал панель поиска с автозаполнением.

У компонента ввода есть свойство onChange, которое запускает создателя действий, который отправляет GET запрос в мою БД для получения предложений автозаполнения.

Затем я возвращаю и рендерирую весь action.payload каждый раз.

onInputChange

onInputChange(event) {
    this.setState({ term: event.target.value });

    if (event.target.value.length >= 3) {
      setTimeout(this.props.fetchSuggestions(event.target.value), 1000);
    }
  }

fetchSuggestions (создатель действия):

export const fetchSuggestions = (term) => async dispatch => {
  const res = await axios.get(`${BASE_URL}/api/symptoms?query=${term}`);

  dispatch({
    type: constants.FETCH_SUGGESTIONS,
    payload: res.data
  });

}

symptomSuggestions (редуктор):

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_SUGGESTIONS:
      return action.payload;
    default:
      return state;
  }
}

На данный момент я ограничил количество запросов длиной 3 и более и запрашивал каждые 1 с, чтобы ограничить количество вызовов API, которые я выполняю, для базы данных.

Учитывая эту реализацию, есть ли другие способы улучшить функцию автозаполнения, чтобы сделать ее менее запаздывающей?

Answer 1

Вы можете попытаться добавить некоторый отклик. Что-то вроде:

let lastFetched = 0;

onInputChange(event) {
  this.setState({ term: event.target.value });

  if (event.target.value.length >= 3 && (new Date() - new Date(lastFetched )) > 300) {
    lastFetched = Date.now();
    this.props.fetchSuggestions(event.target.value);
  }
}

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