Skip to content

Commit 1702dab

Browse files
committed
Clarify branching
We shouldn't use getElementTypeForFiber for branching. That's more of a description thing - not detecting what type of Fiber it is. That's what tags are for. We also shouldn't pass random objects to getChangedX functions and then try to match the type. We can just use the tag to know if it is Class or a Function that might have Hooks.
1 parent 1365e0c commit 1702dab

File tree

1 file changed

+37
-33
lines changed
  • packages/react-devtools-shared/src/backend/fiber

1 file changed

+37
-33
lines changed

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

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1613,11 +1613,8 @@ export function attach(
16131613
prevFiber: Fiber | null,
16141614
nextFiber: Fiber,
16151615
): ChangeDescription | null {
1616-
switch (getElementTypeForFiber(nextFiber)) {
1617-
case ElementTypeClass:
1618-
case ElementTypeFunction:
1619-
case ElementTypeMemo:
1620-
case ElementTypeForwardRef:
1616+
switch (nextFiber.tag) {
1617+
case ClassComponent:
16211618
if (prevFiber === null) {
16221619
return {
16231620
context: null,
@@ -1640,15 +1637,39 @@ export function attach(
16401637
nextFiber.memoizedState,
16411638
),
16421639
};
1643-
1644-
// Only traverse the hooks list once, depending on what info we're returning.
1640+
return data;
1641+
}
1642+
case IncompleteFunctionComponent:
1643+
case FunctionComponent:
1644+
case IndeterminateComponent:
1645+
case ForwardRef:
1646+
case MemoComponent:
1647+
case SimpleMemoComponent:
1648+
if (prevFiber === null) {
1649+
return {
1650+
context: null,
1651+
didHooksChange: false,
1652+
isFirstMount: true,
1653+
props: null,
1654+
state: null,
1655+
};
1656+
} else {
16451657
const indices = getChangedHooksIndices(
16461658
prevFiber.memoizedState,
16471659
nextFiber.memoizedState,
16481660
);
1649-
data.hooks = indices;
1650-
data.didHooksChange = indices !== null && indices.length > 0;
1651-
1661+
const data: ChangeDescription = {
1662+
context: getContextChangedKeys(nextFiber),
1663+
didHooksChange: indices !== null && indices.length > 0,
1664+
isFirstMount: false,
1665+
props: getChangedKeys(
1666+
prevFiber.memoizedProps,
1667+
nextFiber.memoizedProps,
1668+
),
1669+
state: null,
1670+
hooks: indices,
1671+
};
1672+
// Only traverse the hooks list once, depending on what info we're returning.
16521673
return data;
16531674
}
16541675
default:
@@ -1841,20 +1862,13 @@ export function attach(
18411862

18421863
const indices = [];
18431864
let index = 0;
1844-
if (
1845-
next.hasOwnProperty('baseState') &&
1846-
next.hasOwnProperty('memoizedState') &&
1847-
next.hasOwnProperty('next') &&
1848-
next.hasOwnProperty('queue')
1849-
) {
1850-
while (next !== null) {
1851-
if (didStatefulHookChange(prev, next)) {
1852-
indices.push(index);
1853-
}
1854-
next = next.next;
1855-
prev = prev.next;
1856-
index++;
1865+
while (next !== null) {
1866+
if (didStatefulHookChange(prev, next)) {
1867+
indices.push(index);
18571868
}
1869+
next = next.next;
1870+
prev = prev.next;
1871+
index++;
18581872
}
18591873

18601874
return indices;
@@ -1865,16 +1879,6 @@ export function attach(
18651879
return null;
18661880
}
18671881

1868-
// We can't report anything meaningful for hooks changes.
1869-
if (
1870-
next.hasOwnProperty('baseState') &&
1871-
next.hasOwnProperty('memoizedState') &&
1872-
next.hasOwnProperty('next') &&
1873-
next.hasOwnProperty('queue')
1874-
) {
1875-
return null;
1876-
}
1877-
18781882
const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);
18791883
const changedKeys = [];
18801884
// eslint-disable-next-line no-for-of-loops/no-for-of-loops

0 commit comments

Comments
 (0)