From 68466d56cbff7aedad01a53fee524f10260e739e Mon Sep 17 00:00:00 2001
From: Mukul Bansal <mukulbansal01@gmail.com>
Date: Sun, 17 Mar 2024 17:31:54 +0530
Subject: [PATCH] fix: add isMounted in useWindowSize

affects: @medly-components/utils
---
 packages/utils/src/hooks/useAxios/useAxios.ts      | 12 +++---------
 packages/utils/src/hooks/useIsMounted/index.ts     |  1 +
 .../utils/src/hooks/useIsMounted/useIsMounted.tsx  | 14 ++++++++++++++
 packages/utils/src/hooks/useStorage/useStorage.ts  | 12 +++---------
 .../utils/src/hooks/useWindowSize/useWindowSize.ts |  3 +++
 5 files changed, 24 insertions(+), 18 deletions(-)
 create mode 100644 packages/utils/src/hooks/useIsMounted/index.ts
 create mode 100644 packages/utils/src/hooks/useIsMounted/useIsMounted.tsx

diff --git a/packages/utils/src/hooks/useAxios/useAxios.ts b/packages/utils/src/hooks/useAxios/useAxios.ts
index a8205e7e2..c14d58779 100644
--- 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
new file mode 100644
index 000000000..29f8dda19
--- /dev/null
+++ 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
new file mode 100644
index 000000000..7c9a01af4
--- /dev/null
+++ 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
index 360975e81..94b90ac4d 100644
--- 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
index f63bbfbd3..d310951bf 100644
--- 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