fix: avoid-wasteful-renders (#1544)

* Avoid un-necessary redux state update for frequent actions

* Avoid un-necessary re-render when no change in props

Co-authored-by: kedar.netelixir <kedar.choudhary@netelixir.com>

platform/core/src/redux/reducers/viewports.js

@@ -1,5 +1,5 @@
 import cloneDeep from 'lodash.clonedeep';
-import merge from 'lodash.merge';
+import produce from 'immer';
 
 import {
   CLEAR_VIEWPORT,
@@ -93,12 +93,13 @@ const viewports = (state = DEFAULT_STATE, action) => {
      * @return {Object} New state.
      */
     case SET_VIEWPORT_ACTIVE: {
-      const activeViewportIndex = getActiveViewportIndex(
-        state.numRows,
-        state.numColumns,
-        action.viewportIndex
-      );
-      return { ...state, activeViewportIndex };
+      return produce(state, draftState => {
+        draftState.activeViewportIndex = getActiveViewportIndex(
+          draftState.numRows,
+          draftState.numColumns,
+          action.viewportIndex
+        );
+      });
     }
 
     /**
@@ -163,21 +164,20 @@ const viewports = (state = DEFAULT_STATE, action) => {
      * @return {Object} New state.
      */
     case SET_VIEWPORT: {
-      const layout = cloneDeep(state.layout);
+      return produce(state, draftState => {
+        draftState.viewportSpecificData[action.viewportIndex] =
+          draftState.viewportSpecificData[action.viewportIndex] || {};
 
-      let viewportSpecificData = cloneDeep(state.viewportSpecificData);
-      viewportSpecificData[action.viewportIndex] = merge(
-        {},
-        viewportSpecificData[action.viewportIndex],
-        action.viewportSpecificData
-      );
+        Object.keys(action.viewportSpecificData).forEach(key => {
+          draftState.viewportSpecificData[action.viewportIndex][key] =
+            action.viewportSpecificData[key];
+        });
 
-      if (action.viewportSpecificData && action.viewportSpecificData.plugin) {
-        layout.viewports[action.viewportIndex].plugin =
-          action.viewportSpecificData.plugin;
-      }
-
-      return { ...state, layout, viewportSpecificData };
+        if (action.viewportSpecificData && action.viewportSpecificData.plugin) {
+          draftState.layout.viewports[action.viewportIndex].plugin =
+            action.viewportSpecificData.plugin;
+        }
+      });
     }
 
     /**