Производное состояние дроссельной заслонки в React

Вот мой вариант использования, простой компонент React с вводом текста, который фильтрует элементы списка:

const myArray = [...];

// Inside React component:

handleChangeEvent = ({target: {value}}) => this.setState({value});

render() {
  return (
    <div>
      <input onChange = {this.handleChangeEvent} value = {this.state.value} />
      <ul>
        {myArray.filter(v => v.includes(this.state.value)).map(v => <li>{v}</li>)}
      </ul>
    </div>
  );
}

С помощью этого кода каждый раз, когда я меняю текст внутри ввода, элементы внутри списка немедленно меняются.

Чего я хочу добиться: пользователь вводит текст фильтра, этот текст немедленно обновляется при вводе текста (обычно), но я хочу, чтобы элементы внутри списка нет обновлялись немедленно, но скажем, через 500 мс после того, как пользователь закончил вводить текст.

Итак, в основном:

• типы пользователей, текстовые обновления внутри <input>, элементы списка не
• пользователь перестает печатать через 500 мсек, элементы списка обновляются

Редактировать:

Что я пробовал:

import throttle from 'lodash/throttle';
const myArray = [...];

// Inside React component:

handleChangeEvent = ({target: {value}}) => this.setState({value});

calculateMatches = throttle(() => {
  const matches = myArray.filter(v => v.includes(this.state.value))
  return matches;
}, 500);

render() {
  return (
    <div>
      <input onChange = {this.handleChangeEvent} value = {this.state.value} />
      <ul>
        {this.calculateMatches().map(v => <li>{v}</li>)}
      </ul>
    </div>
  );
}

Но это дросселируется каждые 500 мс, поэтому, если пользователь продолжит печатать в течение 1600 мс, он обновит список 3 раза.