Filtering a lot of react/redux data?

Question

Bots

Good afternoon! Please tell me how best to filter the data on react / redux, if there are about 2000 objects, new ones come in every 6 seconds and are displayed on the map and in the sidebar.
At the moment, when I start filtering, the text in the input freezes.
Question
1. Should I stop loading data when input changes?
2. How exactly to implement this filter, if you need to filter an array by a name that is far in the object.
Array Example

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

this implementation does not work

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

I will be grateful for your help!

Answer 1

Use throttle/debounce

Answer 2

I do this
return searchValue.indexOf(searchQuery) !== -1;

Answer 3

I would suggest several ways to optimize.
1) Use a standard for loop with array length caching. The view will worsen, but you will win in terms of speed.
2) You can use web worker. web API. Read it, maybe it will help in your particular case.
3) You can replace the name of the properties of objects with the names of objects, this can be done on the server, ask back to slightly change the structure of the object.
PS In your example, it's not an array, but an object.