fix[devtools/useTransition]: don't check for dispatch property when determining if hook is stateful (#27365)

https://github.com/facebook/react/pull/26740 introduced regression:
React DevTools doesn't record updates for `useTransition` hook. I can
add more details about things on DevTools side, if needed.

The root cause is
491aec5d61/packages/react-reconciler/src/ReactFiberHooks.js (L2728-L2730)

React DevTools expects dispatch to be present for stateful hooks that
can schedule an update -
2eed132847/packages/react-devtools-shared/src/backend/renderer.js (L1422-L1428)

With these changes, we still call dispatch in `startTransition`, but
also patch `queue` object with it, so that React DevTools can recognise
`useTransition` as stateful hook that can schedule update.

I am not sure if this is the right approach to fix this, can we
distinguish if `startTransition` was called from `useTransition` hook or
as a standalone function?
This commit is contained in:
Ruslan Lesiutin
2023-09-21 21:26:20 +01:00
committed by GitHub
parent 68ac6dbcf8
commit 56b14477e9

View File

@@ -1419,22 +1419,20 @@ export function attach(
const boundHasOwnProperty = hasOwnProperty.bind(queue);
// Detect the shape of useState() or useReducer()
// Detect the shape of useState() / useReducer() / useTransition()
// using the attributes that are unique to these hooks
// but also stable (e.g. not tied to current Lanes implementation)
const isStateOrReducer =
boundHasOwnProperty('pending') &&
boundHasOwnProperty('dispatch') &&
typeof queue.dispatch === 'function';
// We don't check for dispatch property, because useTransition doesn't have it
if (boundHasOwnProperty('pending')) {
return true;
}
// Detect useSyncExternalStore()
const isSyncExternalStore =
return (
boundHasOwnProperty('value') &&
boundHasOwnProperty('getSnapshot') &&
typeof queue.getSnapshot === 'function';
// These are the only types of hooks that can schedule an update.
return isStateOrReducer || isSyncExternalStore;
typeof queue.getSnapshot === 'function'
);
}
function didStatefulHookChange(prev: any, next: any): boolean {