optimisate mobile-desktop screen

src/App.tsx

@@ -1,31 +1,33 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Desktop } from './utils/DesktopContext';
 import { Tablet } from './utils/TabletContext';
 import { Outlet } from 'react-router-dom';
 import { MenuOpen } from './utils/MenuContext';
 import './App.scss';
 import classNames from 'classnames';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useWindowSize } from 'react-use';
 
 export const App = () => {
-  const [onTablet, setOnTablet] = useState(window.outerWidth >= 640);
-  const [onDesktop, setOnDesktop] = useState(window.outerWidth >= 1200);
+  const { width } = useWindowSize();
+
+  const [onTablet, setOnTablet] = useState(width >= 640);
+  const [onDesktop, setOnDesktop] = useState(width >= 1200);
 
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-  const handleSetOnDevice = () => {
-    if (window.outerWidth >= 1200) {
+  useEffect(() => {
+    if (width >= 1200) {
       setOnDesktop(true);
       setOnTablet(false);
-    } else if (window.outerWidth >= 640) {
+    } else if (width >= 640) {
       setOnDesktop(false);
       setOnTablet(true);
     } else {
       setOnDesktop(false);
       setOnTablet(false);
     }
-  };
-
-  window.addEventListener('resize', handleSetOnDevice);
+  }, [width]);
 
   return (
     <div className={classNames('App', { 'hidden-overflow': isMenuOpen })}>