diff --git a/src/shells/shared/utils.ts b/src/shells/shared/utils.ts index cdb81595..6f5a4227 100644 --- a/src/shells/shared/utils.ts +++ b/src/shells/shared/utils.ts @@ -37,7 +37,10 @@ export function throttle( if (!running) { callback(...args); running = true; - setTimeout(() => (running = false), wait); + setTimeout(() => { + running = false; + callback(...args); + }, wait); } }; } diff --git a/src/view/components/elements/VirtualizedList.tsx b/src/view/components/elements/VirtualizedList.tsx index 55e6b834..468a1abe 100644 --- a/src/view/components/elements/VirtualizedList.tsx +++ b/src/view/components/elements/VirtualizedList.tsx @@ -2,7 +2,6 @@ import { RefObject, VNode } from "preact"; import { useCallback, useEffect, - useLayoutEffect, useMemo, useRef, useState, @@ -83,12 +82,6 @@ export function useVirtualizedList({ [rowHeight], ); - useLayoutEffect(() => { - if (container.current) { - setHeight(container.current.clientHeight); - } - }, []); - useEffect(() => { const scrollFn = (e: Event) => { const top = (e.target as Element).scrollTop; @@ -109,11 +102,15 @@ export function useVirtualizedList({ }; }, [container.current]); - useResize(() => { - if (container.current) { - setHeight(container.current.clientHeight); - } - }, []); + useResize( + () => { + if (container.current) { + setHeight(container.current.clientHeight); + } + }, + [], + true, + ); const vnodes = useMemo(() => { const vnodes: VNode[] = []; diff --git a/src/view/components/utils.ts b/src/view/components/utils.ts index d0441fc7..195149d3 100644 --- a/src/view/components/utils.ts +++ b/src/view/components/utils.ts @@ -1,4 +1,4 @@ -import { useEffect, useContext, useLayoutEffect } from "preact/hooks"; +import { useContext, useLayoutEffect } from "preact/hooks"; import { WindowCtx } from "../store/react-bindings"; import { throttle } from "../../shells/shared/utils"; @@ -11,15 +11,13 @@ export function useResize(fn: () => void, args: any[], init = false) { // the global window object instead. const win = useContext(WindowCtx) || window; - useEffect(() => { + useLayoutEffect(() => { if (init) fn(); - }, []); - useLayoutEffect(() => { const fn2 = throttle(fn, 60); win.addEventListener("resize", fn2); return () => { win.removeEventListener("resize", fn2); }; - }, args); + }, [...args, init]); } diff --git a/test-e2e/tests/profiler/ranked/profiler-ranked.test.ts b/test-e2e/tests/profiler/ranked/profiler-ranked.test.ts index e950866a..d690ca71 100644 --- a/test-e2e/tests/profiler/ranked/profiler-ranked.test.ts +++ b/test-e2e/tests/profiler/ranked/profiler-ranked.test.ts @@ -22,7 +22,7 @@ export async function run(config: any) { await clickRecordButton(devtools); const nodes = await devtools.$$( - '[data-type="ranked"] > *:not([data-weight])', + '[data-type="ranked"] [data-id]:not([data-weight])', ); expect(nodes.length).to.equal(0);