I have a single-page JS app where I have a big array of objects to store application state. When I update this state Firefox freezes for a few seconds and shows the following message: "A web page is slowing down your browser"
Surprisingly, it works just fine in Chrome. Obviously, the app could be optimized to avoid having such big state but I'm looking for simpler ways.
This is how I update the state:
return {
...state,
data: state.data.map(item => {
if (item.id !== updated.id) {
return item;
}
return {...item, ...updated}
})
};
From what I can tell the freeze caused by any operations with the array (state.data) not just map. I tried all kind of solutions: not using spread operator, with for loops, forEach, splice, slice, not using merge, finding index but it's always either freeze or the app doesn't detect state update. Any suggestions?
