NgRx - multiple dispatching causes the browser to stop responding. How to update multiple elements each second withouth performance issues?

Question

in my applications i'm using Pixi.js for drawing a map with multiple elements. Each second the positions of these elements is updated, the problem is that every time position is updated the elemenet is created from scratch (component is destroyed) but I need to have a previous value of position to make some calculations. So I wanted to add such a state to the store but to have them there I need to dispatch them. So for example 30 elements are created at the same time every second, and at the same time all of them are dispatched. It's breaking the application. Do you have any advice on how to store this data differently so as not to cause performance problems?

This is my reducer method:

function updateRotation(state: State, callSing: string, rotation: number): State {
  const newState = cloneDeep(state);
  if (!newState.elementRotation) {
    newState.elementRotation= {};
  }
  newState.elementRotation[callSing] = rotation;
  return newState;
}

Answer 1

If your item is big, that cloneDeep might slow down your performance. You don't need it.

function updateRotation(state: State, callSing: string, rotation: number): State {
  return {
    ...state,
    rotation: {
      ...state.rotation,
      [callSing]: rotation
    }
  }
}