Repository: facebook/react
Pull request: [devtools] Restore "double-click to view owners tree" functionality


## Summary

Double clicking an element to view the Owner tree is currently broken. We change the Owner in a Transition and suspend while we fetch the new Owners list. However, we only resolve that Promise in an Effect and Effects don't commit anywhere until the Transition is finished.

We'd have to refactor `OwnersListContextController` to trigger the I/O when we actually change the Owner (e.g. using `useActionState` or moving the I/O down to the dispatch calls.

For now we just pass down the basic dispatch and let each call opt-in. We'd have to audit each future call we add until we refactor.

## How did you test this change?

- Run shell and double click "Dehydrateable props"


Changed files:
filename: packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
patch: @@ -891,19 +891,22 @@ function TreeContextController({
           ? store.getIndexOfElementID(store.lastSelectedHostInstanceElementId)
           : null,
   });
-  const dispatchWrapper = useMemo(
-    () => (action: Action) => startTransition(() => dispatch(action)),
+  const transitionDispatch = useMemo(
+    () => (action: Action) =>
+      startTransition(() => {
+        dispatch(action);
+      }),
     [dispatch],
   );
 
   // Listen for host element selections.
   useEffect(() => {
     const handler = (id: Element['id']) =>
-      dispatchWrapper({type: 'SELECT_ELEMENT_BY_ID', payload: id});
+      transitionDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: id});
 
     store.addListener('hostInstanceSelected', handler);
     return () => store.removeListener('hostInstanceSelected', handler);
-  }, [store, dispatchWrapper]);
+  }, [store, transitionDispatch]);
 
   // If a newly-selected search result or inspection selection is inside of a collapsed subtree, auto expand it.
   // This needs to be a layout effect to avoid temporarily flashing an incorrect selection.
@@ -927,7 +930,7 @@ function TreeContextController({
       Array<number>,
       Map<number, number>,
     ]) => {
-      dispatchWrapper({
+      transitionDispatch({
         type: 'HANDLE_STORE_MUTATION',
         payload: [addedElementIDs, removedElementIDs],
       });
@@ -938,19 +941,19 @@ function TreeContextController({
       // At the moment, we can treat this as a mutation.
       // We don't know which Elements were newly added/removed, but that should be okay in this case.
       // It would only impact the search state, which is unlikely to exist yet at this point.
-      dispatchWrapper({
+      transitionDispatch({
         type: 'HANDLE_STORE_MUTATION',
         payload: [[], new Map()],
       });
     }
 
     store.addListener('mutated', handleStoreMutated);
     return () => store.removeListener('mutated', handleStoreMutated);
-  }, [dispatchWrapper, initialRevision, store]);
+  }, [dispatch, initialRevision, store]);
 
   return (
     <TreeStateContext.Provider value={state}>
-      <TreeDispatcherContext.Provider value={dispatchWrapper}>
+      <TreeDispatcherContext.Provider value={dispatch}>
         {children}
       </TreeDispatcherContext.Provider>
     </TreeStateContext.Provider>