Use memoized selector

1 files changed, 26 insertions, 21 deletions

diff --git a/modern/src/common/util/useFeatures.js b/modern/src/common/util/useFeatures.js
index 58c1bbf1..885ba0cf 100644
--- a/modern/src/common/util/useFeatures.js
+++ b/modern/src/common/util/useFeatures.js
@@ -1,3 +1,4 @@
+import { createSelector } from '@reduxjs/toolkit';
 import { useSelector } from 'react-redux';
 
 const get = (server, user, key) => {
@@ -13,25 +14,29 @@ const get = (server, user, key) => {
   return false;
 };
 
-export default () => useSelector((state) => {
-  const { server, user } = state.session;
+const featureSelector = createSelector(
+  (state) => state.session.server,
+  (state) => state.session.user,
+  (server, user) => {
+    const disableAttributes = get(server, user, 'ui.disableAttributes');
+    const disableVehicleFetures = get(server, user, 'ui.disableVehicleFetures');
+    const disableDrivers = disableVehicleFetures || get(server, user, 'ui.disableDrivers');
+    const disableMaintenance = disableVehicleFetures || get(server, user, 'ui.disableMaintenance');
+    const disableGroups = get(server, user, 'ui.disableGroups');
+    const disableEvents = get(server, user, 'ui.disableEvents');
+    const disableComputedAttributes = get(server, user, 'ui.disableComputedAttributes');
+    const disableCalendars = get(server, user, 'ui.disableCalendars');
+  
+    return {
+      disableAttributes,
+      disableDrivers,
+      disableMaintenance,
+      disableGroups,
+      disableEvents,
+      disableComputedAttributes,
+      disableCalendars,
+    };
+  },
+);
 
-  const disableAttributes = get(server, user, 'ui.disableAttributes');
-  const disableVehicleFetures = get(server, user, 'ui.disableVehicleFetures');
-  const disableDrivers = disableVehicleFetures || get(server, user, 'ui.disableDrivers');
-  const disableMaintenance = disableVehicleFetures || get(server, user, 'ui.disableMaintenance');
-  const disableGroups = get(server, user, 'ui.disableGroups');
-  const disableEvents = get(server, user, 'ui.disableEvents');
-  const disableComputedAttributes = get(server, user, 'ui.disableComputedAttributes');
-  const disableCalendars = get(server, user, 'ui.disableCalendars');
-
-  return {
-    disableAttributes,
-    disableDrivers,
-    disableMaintenance,
-    disableGroups,
-    disableEvents,
-    disableComputedAttributes,
-    disableCalendars,
-  };
-});
+export default () => useSelector(featureSelector);