Merge pull request #36302 from suneox/36218-cached-viewport-overlap-k…

…eyboard

36218 cached viewport height conflict event

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;

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;
@@ -26,7 +28,7 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
     const lowerScreenDimmension = Math.min(windowWidth, windowHeight);
     const isSmallScreen = lowerScreenDimmension <= variables.mobileResponsiveWidthBreakpoint;
 
-    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;
@@ -69,6 +71,7 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
             return;
         }
         setCachedViewportHeight(windowHeight);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [windowHeight, isCachedViewportHeight]);
 
     useEffect(() => {