[DevTools] Avoid renders of stale Suspense store

Author: eps1lon

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js

@@ -8,20 +8,20 @@
  */
 
 import type {SuspenseNode} from 'react-devtools-shared/src/frontend/types';
+import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 import * as React from 'react';
 import {useContext} from 'react';
 import {
   TreeDispatcherContext,
   TreeStateContext,
 } from '../Components/TreeContext';
-import {StoreContext} from '../context';
 import {useHighlightHostInstance} from '../hooks';
 import styles from './SuspenseBreadcrumbs.css';
-import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
+import {useSuspenseStore} from './SuspenseTreeContext';
 
 export default function SuspenseBreadcrumbs(): React$Node {
-  const store = useContext(StoreContext);
+  const store = useSuspenseStore();
   const dispatch = useContext(TreeDispatcherContext);
   const {inspectedElementID} = useContext(TreeStateContext);
 

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js

@@ -19,10 +19,12 @@ import {
   TreeDispatcherContext,
   TreeStateContext,
 } from '../Components/TreeContext';
-import {StoreContext} from '../context';
 import {useHighlightHostInstance} from '../hooks';
 import styles from './SuspenseRects.css';
-import {SuspenseTreeStateContext} from './SuspenseTreeContext';
+import {
+  SuspenseTreeStateContext,
+  useSuspenseStore,
+} from './SuspenseTreeContext';
 import typeof {
   SyntheticMouseEvent,
   SyntheticPointerEvent,
@@ -46,7 +48,7 @@ function SuspenseRects({
   suspenseID: SuspenseNode['id'],
 }): React$Node {
   const dispatch = useContext(TreeDispatcherContext);
-  const store = useContext(StoreContext);
+  const store = useSuspenseStore();
 
   const {inspectedElementID} = useContext(TreeStateContext);
 
@@ -158,7 +160,7 @@ function SuspenseRectsShell({
 }: {
   shellID: SuspenseNode['id'],
 }): React$Node {
-  const store = useContext(StoreContext);
+  const store = useSuspenseStore();
   const shell = store.getSuspenseByID(shellID);
   if (shell === null) {
     console.warn(`<Element> Could not find suspense node id ${shellID}`);
@@ -175,7 +177,7 @@ function SuspenseRectsShell({
 }
 
 function SuspenseRectsContainer(): React$Node {
-  const store = useContext(StoreContext);
+  const store = useSuspenseStore();
   // TODO: This relies on a full re-render of all children when the Suspense tree changes.
   const {shells} = useContext(SuspenseTreeStateContext);
 

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js

@@ -12,10 +12,13 @@ import type Store from '../../store';
 
 import * as React from 'react';
 import {useContext, useLayoutEffect, useMemo, useRef, useState} from 'react';
-import {BridgeContext, StoreContext} from '../context';
+import {BridgeContext} from '../context';
 import {TreeDispatcherContext} from '../Components/TreeContext';
 import {useHighlightHostInstance} from '../hooks';
-import {SuspenseTreeStateContext} from './SuspenseTreeContext';
+import {
+  SuspenseTreeStateContext,
+  useSuspenseStore,
+} from './SuspenseTreeContext';
 import styles from './SuspenseTimeline.css';
 import typeof {
   SyntheticEvent,
@@ -63,7 +66,7 @@ function getSuspendableDocumentOrderSuspense(
 
 function SuspenseTimelineInput({rootID}: {rootID: Element['id'] | void}) {
   const bridge = useContext(BridgeContext);
-  const store = useContext(StoreContext);
+  const store = useSuspenseStore();
   const dispatch = useContext(TreeDispatcherContext);
   const {highlightHostInstance, clearHighlightHostInstance} =
     useHighlightHostInstance();
@@ -161,6 +164,7 @@ function SuspenseTimelineInput({rootID}: {rootID: Element['id'] | void}) {
   function handleFocus() {
     const suspense = timeline[value];
 
+    dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: suspense.id});
     highlightHostInstance(suspense.id);
   }
 
@@ -213,7 +217,7 @@ function SuspenseTimelineInput({rootID}: {rootID: Element['id'] | void}) {
 }
 
 export default function SuspenseTimeline(): React$Node {
-  const store = useContext(StoreContext);
+  const store = useSuspenseStore();
   const {shells} = useContext(SuspenseTreeStateContext);
 
   const defaultSelectedRootID = shells.find(rootID => {
@@ -243,16 +247,14 @@ export default function SuspenseTimeline(): React$Node {
         <select
           aria-label="Select Suspense Root"
           className={styles.SuspenseTimelineRootSwitcher}
-          onChange={handleChange}>
+          onChange={handleChange}
+          value={selectedRootID}>
           {shells.map(rootID => {
             // TODO: Use name
             const name = '#' + rootID;
             // TODO: Highlight host on hover
             return (
-              <option
-                key={rootID}
-                selected={rootID === selectedRootID}
-                value={rootID}>
+              <option key={rootID} value={rootID}>
                 {name}
               </option>
             );

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js

@@ -7,6 +7,8 @@
  * @flow
  */
 import type {ReactContext} from 'shared/ReactTypes';
+import type {SuspenseNode} from '../../../frontend/types';
+import type Store from '../../store';
 
 import * as React from 'react';
 import {
@@ -17,7 +19,6 @@ import {
   useMemo,
   useReducer,
 } from 'react';
-import type {SuspenseNode} from '../../../frontend/types';
 import {StoreContext} from '../context';
 
 export type SuspenseTreeState = {
@@ -110,8 +111,18 @@ function SuspenseTreeContextController({children}: Props): React.Node {
   );
 }
 
+function useSuspenseStore(): Store {
+  const store = useContext(StoreContext);
+  // We're currently storing everything Suspense related in the same Store as
+  // Components. However, most reads are currently stateless. This ensures
+  // the latest state is always read from the Store.
+  useContext(SuspenseTreeStateContext);
+  return store;
+}
+
 export {
   SuspenseTreeDispatcherContext,
   SuspenseTreeStateContext,
   SuspenseTreeContextController,
+  useSuspenseStore,
 };