[Perf] Sticker Set: Fix redundant renders in useWindowSize
This commit is contained in:
parent
6a2f06ea9c
commit
aaf1e8be93
@ -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;
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user