Фильтрация большого количества данных react/redux?

Question

[cester]

Добрый день! Скажите пожалуйста как лучше отфильтровать данные на react/redux, если их около 2000 объектов, каждые 6 секунд приходят новые и выводятся на карте и в сайдбаре.
На данный момент когда начинаю фильтровать, текст в інпуте зависает.
Вопрос
1. Стоит ли останавливать подгрузку данных при change input?
2. Как именно реализовать этот фильтр, если надо фильтровать массив по названию которое далеко в объекте.
Пример массива

arr = {12: {name: "fddffdt", ...}, 13: {name: "dfgmm cvbnvbn ", ...}, 14: {name: "uyuyu", ...}}

такая реализация не работает

state.data.filter(item => Object.values(item)[0].name.indexOf(action.text))

Буду благодарен за помощь!

Answer 1

[Антон]

Использовать throttle/debounce

Answer 2

[vaskadogana]

я так делаю
return searchValue.indexOf(searchQuery) !== -1;

Answer 3

[197291]

Я бы предложил несколько способов оптимизации.
1) Использовать стандартный цикл for с кэшированием длины массива. Вид ухудшится, но по скорости выиграете.
2) Можно использовать web worker. Web APi. Почитайте, может в вашем конкретном случае поможет.
3) Можно заменить название свойств объектов на имена объектов, это можно осуществить на сервере, попросить back чуть менять структуру объекта.

P.S. У вас в примере не массив, а объект.

Comments

[cester]

Спасибо за советы, но сейчас заметил что даже если ничего не фильтрую, просто в редюсере вывожу экшн, такая же ситуация! не понимаю в чем может быть проблема. И в редюсере текст появляеться быстрее чем в инпуте.

У вас в примере не массив, а объект

это только здесь, в коде массив.

[197291]

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