mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
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 is491aec5d61/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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user