From 257700492b40f65d2e688d8b888a5f04afc3c371 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Fri, 14 Nov 2025 11:41:39 -0500 Subject: [PATCH] fix(replay): Fix infinite re-render in breadcrumbs Fixes an infinite re-rener in replay breadcrumbs when an HTML snippet is displayed and we scroll around quickly. Due to virtualized rows, we need to tell the virtualizer to update the row dimensions when we show the HTML snippet. When we scroll away and back, it is possible to hit a race condition where we call updateDimensions infinitely. Fixes JAVASCRIPT-31G4 --- .../components/replays/breadcrumbs/breadcrumbItem.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx b/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx index 1ea994a7bae3ca..325be64eeb2a82 100644 --- a/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx +++ b/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx @@ -68,14 +68,21 @@ export default function BreadcrumbItem({ }); const prevExtractState = useRef(isPending); + const prevShowSnippet = useRef(showSnippet); useEffect(() => { if (!updateDimensions) { return; } - if (isPending !== prevExtractState.current || showSnippet) { + if ( + isPending !== prevExtractState.current || + (showSnippet && prevShowSnippet.current !== showSnippet) + ) { prevExtractState.current = isPending; + // We want/need to only re-render once when showSnippet is initially toggled, + // otherwise can potentially trigger an infinite re-render. + prevShowSnippet.current = showSnippet; updateDimensions(); } }, [isPending, updateDimensions, showSnippet]);