From 9655a0691e3cda20160b01aaadc6238ea13a3ede Mon Sep 17 00:00:00 2001
From: Sebastian Sebbie Silbermann <sebastian.silbermann@vercel.com>
Date: Mon, 29 Sep 2025 11:03:47 +0200
Subject: [PATCH] [DevTools] Don't call Hooks conditionally

---
 .../views/Profiler/SidebarEventInfo.js        | 46 +++++++++++--------
 .../views/SuspenseTab/SuspenseTimeline.js     | 44 +++++++++---------
 2 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
index 77f0d13feb72f..8b55e0f8c0c09 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
@@ -8,6 +8,7 @@
  */
 
 import type {SchedulingEvent} from 'react-devtools-timeline/src/types';
+import type {ReactFunctionLocation} from 'shared/ReactTypes';
 
 import * as React from 'react';
 import Button from '../Button';
@@ -27,6 +28,28 @@ import styles from './SidebarEventInfo.css';
 
 export type Props = {};
 
+type FunctionLocationProps = {
+  location: ReactFunctionLocation,
+  displayName: string,
+};
+function FunctionLocation({location, displayName}: FunctionLocationProps) {
+  // TODO: We should support symbolication here as well, but
+  // symbolicating the whole stack can be expensive
+  const [canViewSource, viewSource] = useOpenResource(location, null);
+  return (
+    <li>
+      <Button
+        className={
+          canViewSource ? styles.ClickableSource : styles.UnclickableSource
+        }
+        disabled={!canViewSource}
+        onClick={viewSource}>
+        {displayName}
+      </Button>
+    </li>
+  );
+}
+
 type SchedulingEventProps = {
   eventInfo: SchedulingEvent,
 };
@@ -74,25 +97,12 @@ function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
                       );
                     }
 
-                    // TODO: We should support symbolication here as well, but
-                    // symbolicating the whole stack can be expensive
-                    const [canViewSource, viewSource] = useOpenResource(
-                      location,
-                      null,
-                    );
                     return (
-                      <li key={index}>
-                        <Button
-                          className={
-                            canViewSource
-                              ? styles.ClickableSource
-                              : styles.UnclickableSource
-                          }
-                          disabled={!canViewSource}
-                          onClick={viewSource}>
-                          {displayName}
-                        </Button>
-                      </li>
+                      <FunctionLocation
+                        key={index}
+                        displayName={displayName}
+                        location={location}
+                      />
                     );
                   },
                 )}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
index d618bfcea63b3..51479ac829564 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
@@ -39,28 +39,6 @@ function SuspenseTimelineInput() {
   const min = 0;
   const max = timeline.length > 0 ? timeline.length - 1 : 0;
 
-  if (rootID === null) {
-    return (
-      <div className={styles.SuspenseTimelineInput}>No root selected.</div>
-    );
-  }
-
-  if (!store.supportsTogglingSuspense(rootID)) {
-    return (
-      <div className={styles.SuspenseTimelineInput}>
-        Can't step through Suspense in production apps.
-      </div>
-    );
-  }
-
-  if (timeline.length === 0) {
-    return (
-      <div className={styles.SuspenseTimelineInput}>
-        Root contains no Suspense nodes.
-      </div>
-    );
-  }
-
   function switchSuspenseNode(nextTimelineIndex: number) {
     const nextSelectedSuspenseID = timeline[nextTimelineIndex];
     highlightHostInstance(nextSelectedSuspenseID);
@@ -175,6 +153,28 @@ function SuspenseTimelineInput() {
     };
   }, [playing]);
 
+  if (rootID === null) {
+    return (
+      <div className={styles.SuspenseTimelineInput}>No root selected.</div>
+    );
+  }
+
+  if (!store.supportsTogglingSuspense(rootID)) {
+    return (
+      <div className={styles.SuspenseTimelineInput}>
+        Can't step through Suspense in production apps.
+      </div>
+    );
+  }
+
+  if (timeline.length === 0) {
+    return (
+      <div className={styles.SuspenseTimelineInput}>
+        Root contains no Suspense nodes.
+      </div>
+    );
+  }
+
   return (
     <>
       <Button