From aaf1e8be939ffa1dda576e4c1f5991fc506cf75a Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 5 Jul 2023 13:15:18 +0200
Subject: [PATCH] [Perf] Sticker Set: Fix redundant renders in `useWindowSize`

---
 src/hooks/useWindowSize.ts | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts
index 993f8ffc6..a26253c83 100644
--- a/src/hooks/useWindowSize.ts
+++ b/src/hooks/useWindowSize.ts
@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState } from '../lib/teact/teact';
-import type { ApiDimensions } from '../api/types';
 
 import { throttle } from '../util/schedulers';
 import windowSize from '../util/windowSize';
@@ -7,20 +6,22 @@ import useDebouncedCallback from './useDebouncedCallback';
 
 const THROTTLE = 250;
 
-const useWindowSize = () => {
-  const [size, setSize] = useState<ApiDimensions>(windowSize.get());
+export default function useWindowSize() {
+  const { width: initialWidth, height: initialHeight } = windowSize.get();
+  const [width, setWidth] = useState(initialWidth);
+  const [height, setHeight] = useState(initialHeight);
   const [isResizing, setIsResizing] = useState(false);
   const setIsResizingDebounced = useDebouncedCallback(setIsResizing, [setIsResizing], THROTTLE, true);
 
-  const result = useMemo(() => ({ ...size, isResizing }), [isResizing, size]);
-
   useEffect(() => {
     const throttledSetIsResizing = throttle(() => {
       setIsResizing(true);
     }, THROTTLE, true);
 
     const throttledSetSize = throttle(() => {
-      setSize(windowSize.get());
+      const { width: newWidth, height: newHeight } = windowSize.get();
+      setWidth(newWidth);
+      setHeight(newHeight);
       setIsResizingDebounced(false);
     }, THROTTLE, false);
 
@@ -36,7 +37,5 @@ const useWindowSize = () => {
     };
   }, [setIsResizingDebounced]);
 
-  return result;
-};
-
-export default useWindowSize;
+  return useMemo(() => ({ width, height, isResizing }), [height, isResizing, width]);
+}