@applica-software-guru/react-admin 1.3.166 → 1.3.167

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.166",
+  "version": "1.3.167",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/Layout/Navigation/NavGroup.jsx

@@ -37,8 +37,7 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
   const { pathname } = { pathname: '' }; // useLocation()
   const { horizontal, downLg } = useLayoutMediaState();
   const menu = useMenuConfig();
-  const { drawerOpen, selectedID } = menu;
-  const { activeID } = useMenuConfig();
+  const { drawerOpen, selectedID, activeID } = menu;
 
   const [anchorEl, setAnchorEl] = useState(null);
   const [currentItem, setCurrentItem] = useState(item);

package/src/hooks/useLocalStorage.tsx

@@ -1,51 +1,48 @@
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import * as yup from 'yup';
 import { LocalStorage } from '../utils/localStorage';
 
 const localStorageInstance = new LocalStorage();
 
-function useLocalStorage(key: string, defaultValue?: unknown): [unknown, (newValue: unknown) => unknown] {
-  yup.string().required().validateSync(key);
-
-  function buildSetter(key: string, currentValue: unknown, callback: (newValue: unknown) => unknown): (newValue: unknown) => unknown {
-    return function (newValue: unknown) {
-      const updatedValue = _.isFunction(newValue) ? newValue(currentValue) : newValue;
-      localStorageInstance.set(key, updatedValue);
-      callback(updatedValue);
-      return updatedValue;
-    };
-  }
+type ISetter = (newValue: unknown) => unknown;
 
-  const [fallbackValue, updateFallbackValue] = useState(defaultValue),
-    [state, updateState] = useState(localStorageInstance.get(key) ?? defaultValue),
-    [setter, updateSetter] = useState(() => buildSetter(key, state, updateState));
+function buildSetter(key: string, currentValue: unknown, callback: ISetter): ISetter {
+  return function (newValue: unknown) {
+    const updatedValue = _.isFunction(newValue) ? newValue(currentValue) : newValue;
+    localStorageInstance.set(key, updatedValue);
+    callback(updatedValue);
+    return updatedValue;
+  };
+}
 
-  useEffect(() => {
-    if (!_.isEqual(defaultValue, fallbackValue)) {
-      updateFallbackValue(defaultValue);
-    }
-  }, [defaultValue, fallbackValue, updateFallbackValue]);
+function useLocalStorage(key: string, defaultValue?: unknown): [unknown, (newValue: unknown) => unknown] {
+  yup.string().required().validateSync(key);
+  const [state, setState] = useState(localStorageInstance.get(key) ?? defaultValue),
+    defaultValueRef = useRef<unknown | undefined>(defaultValue),
+    storedDefaultValue = _.isEqual(defaultValueRef.current, defaultValue) ? defaultValueRef.current : defaultValue,
+    setterRef = useRef<{ key: string; value: unknown; setter: ISetter } | undefined>(),
+    storedSetter = setterRef.current;
 
   useEffect(() => {
-    updateState(localStorageInstance.get(key) ?? fallbackValue);
-  }, [key, fallbackValue, updateState]);
+    setState(localStorageInstance.get(key) ?? storedDefaultValue);
+  }, [key, storedDefaultValue, setState]);
 
   useEffect(() => {
     function listener(value: unknown) {
-      updateState(value);
+      setState(value);
     }
     localStorageInstance.watch(key, listener);
     return () => {
       localStorageInstance.unwatch(key, listener);
     };
-  }, [key, updateState]);
+  }, [key, setState]);
 
-  useEffect(() => {
-    updateSetter(() => buildSetter(key, state, updateState));
-  }, [key, state, updateState, updateSetter]);
+  if (key !== storedSetter?.key || !_.isEqual(state, storedSetter?.value)) {
+    setterRef.current = { key, value: state, setter: buildSetter(key, state, setState) };
+  }
 
-  return [state, setter];
+  return [state, setterRef.current?.setter ?? _.noop];
 }
 
 export default useLocalStorage;