fix(trace): opt out of batching renderer (#71405)

Odd number of bit flips results in unchanged state this was a non issue before the batching renderer as each rerender was flushed to the tree.
getsentry · May 28, 2024 · bd47227 · bd47227
1 parent dd28d20
commit bd47227
Showing 1 changed file with 19 additions and 6 deletions.
diff --git a/static/app/views/performance/newTraceDetails/index.tsx b/static/app/views/performance/newTraceDetails/index.tsx
@@ -8,6 +8,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import {flushSync} from 'react-dom';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 import * as qs from 'query-string';
@@ -239,7 +240,11 @@ function TraceViewContent(props: TraceViewContentProps) {
   const {projects} = useProjects();
   const rootEvent = useTraceRootEvent(props.trace);
   const loadingTraceRef = useRef<TraceTree | null>(null);
-  const [forceRender, rerender] = useReducer(x => x + (1 % 2), 0);
+  const [forceRender, rerender] = useReducer(x => (x + 1) % Number.MAX_SAFE_INTEGER, 0);
+
+  const forceRerender = useCallback(() => {
+    flushSync(rerender);
+  }, []);
 
   const initializedRef = useRef(false);
   const scrollQueueRef = useRef<{eventId?: string; path?: TraceTree.NodePath[]} | null>(
@@ -603,7 +608,7 @@ function TraceViewContent(props: TraceViewContentProps) {
 
       // We call expandToNode because we want to ensure that the node is
       // visible and may not have been collapsed/hidden by the user
-      TraceTree.ExpandToPath(tree, node.path, rerender, {
+      TraceTree.ExpandToPath(tree, node.path, forceRerender, {
         api,
         organization,
       }).then(maybeNode => {
@@ -638,14 +643,22 @@ function TraceViewContent(props: TraceViewContentProps) {
         }
       });
     },
-    [api, organization, setRowAsFocused, scrollRowIntoView, tree, traceDispatch]
+    [
+      api,
+      organization,
+      setRowAsFocused,
+      scrollRowIntoView,
+      tree,
+      traceDispatch,
+      forceRerender,
+    ]
   );
 
   // Unlike onTabScrollToNode, this function does not set the node as the current
   // focused node, but rather scrolls the node into view and sets the roving index to the node.
   const onScrollToNode = useCallback(
     (node: TraceTreeNode<TraceTree.NodeValue>) => {
-      TraceTree.ExpandToPath(tree, node.path, rerender, {
+      TraceTree.ExpandToPath(tree, node.path, forceRerender, {
         api,
         organization,
       }).then(maybeNode => {
@@ -673,7 +686,7 @@ function TraceViewContent(props: TraceViewContentProps) {
         }
       });
     },
-    [api, organization, scrollRowIntoView, tree, traceDispatch]
+    [api, organization, scrollRowIntoView, tree, traceDispatch, forceRerender]
   );
 
   // Callback that is invoked when the trace loads and reaches its initialied state,
@@ -868,7 +881,7 @@ function TraceViewContent(props: TraceViewContentProps) {
         <TraceGrid layout={traceState.preferences.layout} ref={setTraceGridRef}>
           <Trace
             trace={tree}
-            rerender={rerender}
+            rerender={forceRerender}
             trace_id={props.traceSlug}
             trace_state={traceState}
             trace_dispatch={traceDispatch}