From e520939240f1ad8f2d23e4e0554ee40f722209b4 Mon Sep 17 00:00:00 2001
From: Cong Pham <ptcong411@gmail.com>
Date: Sun, 11 Feb 2024 11:00:15 +0700
Subject: [PATCH] 36218 cached viewport height conflict event

---
 src/hooks/useDebouncedState.ts         | 2 +-
 src/hooks/useWindowDimensions/index.ts | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useDebouncedState.ts b/src/hooks/useDebouncedState.ts
index 3677c85f3081..6fda8f7d54d4 100644
--- a/src/hooks/useDebouncedState.ts
+++ b/src/hooks/useDebouncedState.ts
@@ -17,7 +17,7 @@ import CONST from '@src/CONST';
  * @example
  * const [value, debouncedValue, setValue] = useDebouncedState<string>("", 300);
  */
-function useDebouncedState<T>(initialValue: T, delay = CONST.TIMING.SEARCH_OPTION_LIST_DEBOUNCE_TIME): [T, T, (value: T) => void] {
+function useDebouncedState<T>(initialValue: T, delay: number = CONST.TIMING.SEARCH_OPTION_LIST_DEBOUNCE_TIME): [T, T, (value: T) => void] {
     const [value, setValue] = useState(initialValue);
     const [debouncedValue, setDebouncedValue] = useState(initialValue);
     const debouncedSetDebouncedValue = useRef(debounce(setDebouncedValue, delay)).current;
diff --git a/src/hooks/useWindowDimensions/index.ts b/src/hooks/useWindowDimensions/index.ts
index 4ba2c4ad9b41..1d905ce55d79 100644
--- a/src/hooks/useWindowDimensions/index.ts
+++ b/src/hooks/useWindowDimensions/index.ts
@@ -1,8 +1,10 @@
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Dimensions, useWindowDimensions} from 'react-native';
+import useDebouncedState from '@hooks/useDebouncedState';
 import * as Browser from '@libs/Browser';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import type WindowDimensions from './types';
 
 const initalViewportHeight = window.visualViewport?.height ?? window.innerHeight;
@@ -23,7 +25,7 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
     const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint;
     const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint;
 
-    const [cachedViewportHeight, setCachedViewportHeight] = useState(windowHeight);
+    const [, cachedViewportHeight, setCachedViewportHeight] = useDebouncedState(windowHeight, CONST.TIMING.RESIZE_DEBOUNCE_TIME);
 
     const handleFocusIn = useRef((event: FocusEvent) => {
         const targetElement = event.target as HTMLElement;
@@ -66,6 +68,7 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
             return;
         }
         setCachedViewportHeight(windowHeight);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [windowHeight, isCachedViewportHeight]);
 
     useEffect(() => {