Skip to content

Commit 2d58205

Browse files
committed
devtools: compare effects by deps not referential equality
1 parent c4a45ff commit 2d58205

File tree

1 file changed

+44
-1
lines changed

1 file changed

+44
-1
lines changed

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

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ import type {
103103
ComponentFilter,
104104
ElementType,
105105
} from 'react-devtools-shared/src/types';
106+
import is from 'shared/objectIs';
106107

107108
type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
108109
type getTypeSymbolType = (type: any) => Symbol | number;
@@ -1073,6 +1074,48 @@ export function attach(
10731074
return null;
10741075
}
10751076

1077+
function areHookInputsEqual(
1078+
nextDeps: Array<mixed>,
1079+
prevDeps: Array<mixed> | null,
1080+
) {
1081+
if (prevDeps === null) {
1082+
return false;
1083+
}
1084+
1085+
for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
1086+
if (is(nextDeps[i], prevDeps[i])) {
1087+
continue;
1088+
}
1089+
return false;
1090+
}
1091+
return true;
1092+
}
1093+
1094+
function isEffect(memoizedState) {
1095+
return (
1096+
memoizedState !== null &&
1097+
typeof memoizedState === 'object' &&
1098+
memoizedState.hasOwnProperty('tag') &&
1099+
memoizedState.hasOwnProperty('create') &&
1100+
memoizedState.hasOwnProperty('destroy') &&
1101+
memoizedState.hasOwnProperty('deps') &&
1102+
memoizedState.hasOwnProperty('next')
1103+
);
1104+
}
1105+
1106+
function didHookChange(prev: Hook, next: Hook): boolean {
1107+
const prevMemoizedState = prev.memoizedState;
1108+
const nextMemoizedState = next.memoizedState;
1109+
1110+
if (isEffect(prevMemoizedState) && isEffect(nextMemoizedState)) {
1111+
return !areHookInputsEqual(
1112+
nextMemoizedState.deps,
1113+
prevMemoizedState.deps,
1114+
);
1115+
}
1116+
return nextMemoizedState !== prevMemoizedState;
1117+
}
1118+
10761119
function didHooksChange(prev: any, next: any): boolean {
10771120
if (prev == null || next == null) {
10781121
return false;
@@ -1086,7 +1129,7 @@ export function attach(
10861129
next.hasOwnProperty('queue')
10871130
) {
10881131
while (next !== null) {
1089-
if (next.memoizedState !== prev.memoizedState) {
1132+
if (didHookChange(prev, next)) {
10901133
return true;
10911134
} else {
10921135
next = next.next;

0 commit comments

Comments
 (0)