Skip to content

Commit 56b1447

Browse files
authored
fix[devtools/useTransition]: don't check for dispatch property when determining if hook is stateful (#27365)
#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 https://github.com/facebook/react/blob/491aec5d6113ce5bae7c10966bc38a4a8fc091a8/packages/react-reconciler/src/ReactFiberHooks.js#L2728-L2730 React DevTools expects dispatch to be present for stateful hooks that can schedule an update - https://github.com/facebook/react/blob/2eed1328478e8c923fcb4e6abf5efbd9e1233402/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?
1 parent 68ac6db commit 56b1447

File tree

1 file changed

+8
-10
lines changed

1 file changed

+8
-10
lines changed

packages/react-devtools-shared/src/backend/renderer.js

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1419,22 +1419,20 @@ export function attach(
14191419

14201420
const boundHasOwnProperty = hasOwnProperty.bind(queue);
14211421

1422-
// Detect the shape of useState() or useReducer()
1422+
// Detect the shape of useState() / useReducer() / useTransition()
14231423
// using the attributes that are unique to these hooks
14241424
// but also stable (e.g. not tied to current Lanes implementation)
1425-
const isStateOrReducer =
1426-
boundHasOwnProperty('pending') &&
1427-
boundHasOwnProperty('dispatch') &&
1428-
typeof queue.dispatch === 'function';
1425+
// We don't check for dispatch property, because useTransition doesn't have it
1426+
if (boundHasOwnProperty('pending')) {
1427+
return true;
1428+
}
14291429

14301430
// Detect useSyncExternalStore()
1431-
const isSyncExternalStore =
1431+
return (
14321432
boundHasOwnProperty('value') &&
14331433
boundHasOwnProperty('getSnapshot') &&
1434-
typeof queue.getSnapshot === 'function';
1435-
1436-
// These are the only types of hooks that can schedule an update.
1437-
return isStateOrReducer || isSyncExternalStore;
1434+
typeof queue.getSnapshot === 'function'
1435+
);
14381436
}
14391437

14401438
function didStatefulHookChange(prev: any, next: any): boolean {

0 commit comments

Comments
 (0)