[DevTools] Don't call Hooks conditionally

Author: eps1lon

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