[Perf] Sticker Set: Fix redundant renders in useWindowSize

This commit is contained in:
Alexander Zinchuk 2023-07-05 13:15:18 +02:00
parent 6a2f06ea9c
commit aaf1e8be93

View File

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