diff --git a/packages/base/src/hooks/useViewportRange.ts b/packages/base/src/hooks/useViewportRange.ts
index 63da6dc677c..ffb4031b911 100644
--- a/packages/base/src/hooks/useViewportRange.ts
+++ b/packages/base/src/hooks/useViewportRange.ts
@@ -1,22 +1,22 @@
 import { Device } from '@ui5/webcomponents-react-base/lib/Device';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 export const useViewportRange = (rangeSet) => {
   const [currentRange, setCurrentRange] = useState(Device.media.getCurrentRange(rangeSet, window.innerWidth).name);
-
-  const onWindowResize = useCallback(
-    ({ name: range }) => {
-      setCurrentRange(range);
-    },
-    [setCurrentRange]
-  );
+  const isMounted = useRef(true);
 
   useEffect(() => {
-    Device.media.attachHandler(onWindowResize, null, 'StdExt');
+    const handler = ({ name: range }) => {
+      if (isMounted.current === true) {
+        setCurrentRange(range);
+      }
+    };
+    Device.media.attachHandler(handler, null, 'StdExt');
     return () => {
-      Device.resize.detachHandler(onWindowResize, null);
+      isMounted.current = false;
+      Device.resize.detachHandler(handler, null);
     };
-  }, [onWindowResize]);
+  }, [setCurrentRange, isMounted]);
 
   return currentRange;
 };