From 754240a531fc8a963b434abd7f809fec8d17618f Mon Sep 17 00:00:00 2001 From: Isaac Hunja Date: Wed, 11 Mar 2026 14:18:19 +0300 Subject: [PATCH] fix(examples): use layoutEffect ref for scrollMargin in window example Accessing listRef.current during render triggers the react-hooks/refs ESLint rule in eslint-plugin-react-hooks v7. Use the same pattern as the dynamic example: store the offset in a separate ref via useLayoutEffect. Fixes #1116 --- examples/react/window/src/main.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/examples/react/window/src/main.tsx b/examples/react/window/src/main.tsx index 9b29a4508..212988be2 100644 --- a/examples/react/window/src/main.tsx +++ b/examples/react/window/src/main.tsx @@ -7,12 +7,17 @@ import { useWindowVirtualizer } from '@tanstack/react-virtual' function Example() { const listRef = React.useRef(null) + const listOffsetRef = React.useRef(0) + + React.useLayoutEffect(() => { + listOffsetRef.current = listRef.current?.offsetTop ?? 0 + }, []) const virtualizer = useWindowVirtualizer({ count: 10000, estimateSize: () => 35, overscan: 5, - scrollMargin: listRef.current?.offsetTop ?? 0, + scrollMargin: listOffsetRef.current, }) return (