Видя значительную задержку при первом событии ввода, запущенном обработчику событий в React / redux с debounce

Question

Моя конечная цель - создать окно фильтра поиска, которое будет вызывать API для обновления элементов ListView.Когда пользователь начинает печатать, я хочу немедленно отправить событие, чтобы показать загрузчик поверх элементов ListView, и в реальном времени получить текст в обновлении фильтра поиска, используя состояние компонента (я думаю).Затем я хочу получить отклоненную рассылку, которая выполняет вызов API, обновляет элементы и состояние в магазине.

Вот основы моего компонента поиска:

class Filters extends React.PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      search: this.props.filters.search,
    }

    this.onSearchChange = this.onSearchChange.bind(this)
    this.handleSearchDebounced = _.debounce(function() {
      console.log('handleSearchDebounced')
      // this.props.onSearchFilterChange.apply(this, [this.state.search])
    }, 250)
  }
  onSearchChange(e) {
    console.log('onSearchChange')
    this.setState({ search: e.target.value })
    // simple dispatch that shows the loader
    this.props.startLoading()
    this.handleSearchDebounced()
  }
  render() {
    const {
      filters,
      onSearchFilterChange,
    } = this.props
    console.log('filters is re-rendering')
    return (
      <FiltersContainer>
        <input
          placeholder="Search"
          value={this.state.search}
          onChange={this.onSearchChange}
        />
      </FiltersContainer>
    )
  }
}

Вот проблема,При первом вводе в поле поиска появляется задержка около 2 секунд, когда я не могу взаимодействовать с экраном, даже без вызова API и т. д. Если я удаляю dispatch, чтобы показать загрузчик, то он обновляется нормально.Кроме того, интересно то, что каждый последующий ввод в поле поиска РАБОТАЕТ ТОЧНО после первого запаздывающего (с dispatch). Кажется, что отладка работает правильно из моих журналов консоли.

Я такжеприкрепление профилировщика, который показывает огромную разницу между первым и последующим событиями набора текста.

Есть какие-нибудь идеи по этому поводу?

Answer 1

Итак, я обнаружил, что проблема связана с React.PureComponent.Достаточно просто, у меня была лишь пара функций, определенных в render в разных компонентах для вычисления значений.Легко исправить, не делай этого.Кроме того, оказалось, что подсказки рендеринга в моем представлении списка оказали огромное влияние на производительность.

Answer 2

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

Вы прямо устанавливаете this.props.filters.search в состояние, которое является неправильным способом, и это может вызвать проблемы.Вы должны обновить его в хуке жизненного цикла componentDidMount, например.

this.state = {
  search: '',
}
componentDidMount(){
  this.setState({ search: this.props.filters.search });
}