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("", 300); */ -function useDebouncedState(initialValue: T, delay = CONST.TIMING.SEARCH_OPTION_LIST_DEBOUNCE_TIME): [T, T, (value: T) => void] { +function useDebouncedState(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 abd92db8a040..6e68e696ba89 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; @@ -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(() => {