diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js index ab4d9332d735f..fa1d619a93c28 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js @@ -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, Map, ]) => { - dispatchWrapper({ + transitionDispatch({ type: 'HANDLE_STORE_MUTATION', payload: [addedElementIDs, removedElementIDs], }); @@ -938,7 +941,7 @@ 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()], }); @@ -946,11 +949,11 @@ function TreeContextController({ store.addListener('mutated', handleStoreMutated); return () => store.removeListener('mutated', handleStoreMutated); - }, [dispatchWrapper, initialRevision, store]); + }, [dispatch, initialRevision, store]); return ( - + {children}