fix: add isMounted in useWindowSize

affects: @medly-components/utils
medly · Mar 17, 2024 · 68466d5 · 68466d5
1 parent b84b780
commit 68466d5
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 18 deletions.
diff --git a/packages/utils/src/hooks/useAxios/useAxios.ts b/packages/utils/src/hooks/useAxios/useAxios.ts
@@ -1,5 +1,6 @@
 import axios, { AxiosResponse } from 'axios';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
+import { useIsMounted } from '../useIsMounted';
 import { Result } from './types';
 
 /**
@@ -12,7 +13,7 @@ export const useAxios = <Data = any, Error = { message: string; variant: 'error'
         [response, setResponse] = useState<AxiosResponse<Data>>(),
         [error, setError] = useState<AxiosResponse<Error>>(),
         [isLoading, setLoadingState] = useState(false),
-        isMounted = useRef<boolean>(true);
+        isMounted = useIsMounted();
 
     const request = useCallback(async ({ onSuccess, onError, ...config }) => {
         setLoadingState(true);
@@ -40,13 +41,6 @@ export const useAxios = <Data = any, Error = { message: string; variant: 'error'
             });
     }, []);
 
-    useEffect(
-        () => () => {
-            isMounted.current = false;
-        },
-        []
-    );
-
     const clear = useCallback(() => {
         setData(undefined);
         setResponse(undefined);

diff --git a/packages/utils/src/hooks/useIsMounted/index.ts b/packages/utils/src/hooks/useIsMounted/index.ts
@@ -0,0 +1 @@
+export * from './useIsMounted';
diff --git a/packages/utils/src/hooks/useIsMounted/useIsMounted.tsx b/packages/utils/src/hooks/useIsMounted/useIsMounted.tsx
@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+
+export const useIsMounted = () => {
+    const isMounted = useRef<boolean>(true);
+
+    useEffect(
+        () => () => {
+            isMounted.current = false;
+        },
+        []
+    );
+
+    return isMounted;
+};
diff --git a/packages/utils/src/hooks/useStorage/useStorage.ts b/packages/utils/src/hooks/useStorage/useStorage.ts
@@ -1,7 +1,8 @@
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { COOKIE_STORAGE } from '../../helpers/cookieStorage';
 import { LOCAL_STORAGE } from '../../helpers/localStorage';
 import { SESSION_STORAGE } from '../../helpers/sessionStorage';
+import { useIsMounted } from '../useIsMounted';
 import { StorageConfig } from './Storage.context';
 import { UseStorageOptions, UseStorageSetValue } from './types';
 
@@ -24,7 +25,7 @@ export const useStorage = <T>(key: string, currOptions?: UseStorageOptions<T>):
         options = currOptions ?? contextOption,
         storage = storageObj[options.storage || 'localStorage'],
         { initialValue } = options,
-        isMounted = useRef<boolean>(true);
+        isMounted = useIsMounted();
 
     const readValue = (): T => {
         if (typeof window === 'undefined') {
@@ -58,13 +59,6 @@ export const useStorage = <T>(key: string, currOptions?: UseStorageOptions<T>):
         }
     };
 
-    useEffect(
-        () => () => {
-            isMounted.current = false;
-        },
-        []
-    );
-
     useEffect(() => {
         const handleStorageChange = () => isMounted.current && setStoredValue(readValue());
 

diff --git a/packages/utils/src/hooks/useWindowSize/useWindowSize.ts b/packages/utils/src/hooks/useWindowSize/useWindowSize.ts
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { debounce } from '../../helpers';
+import { useIsMounted } from '../useIsMounted';
 
 /**
  * A hook to get the window size
@@ -8,6 +9,7 @@ import { debounce } from '../../helpers';
  *
  */
 export const useWindowSize = () => {
+    const isMounted = useIsMounted();
     const [windowSize, setWindowSize] = useState({
         width: typeof window !== 'undefined' ? window.innerWidth : 0,
         height: typeof window !== 'undefined' ? window.innerHeight : 0
@@ -16,6 +18,7 @@ export const useWindowSize = () => {
     useEffect(() => {
         const handleResize = debounce(
             () =>
+                isMounted.current &&
                 setWindowSize({
                     width: window.innerWidth,
                     height: window.innerHeight