Skip to content

Commit 995f9da

Browse files
committed
[devtools] Fix false positive rendering detection in didFiberRender
Improve rendering detection accuracy by adding actual input change verification for user components that have PerformedWork flag set. This prevents showing "The parent component rendered" message and highlight updates for components that didn't actually re-render due to bailouts. - Add props/state/ref comparison for user components after PerformedWork check - Restore original props comparison logic for host components - Fixes issue where bailout components were incorrectly marked as rendered
1 parent 3705486 commit 995f9da

File tree

1 file changed

+14
-1
lines changed
  • packages/react-devtools-shared/src/backend/fiber

1 file changed

+14
-1
lines changed

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1885,7 +1885,20 @@ export function attach(
18851885
// releasing DevTools in lockstep with React, we should import a
18861886
// function from the reconciler instead.
18871887
const PerformedWork = 0b000000000000000000000000001;
1888-
return (getFiberFlags(nextFiber) & PerformedWork) === PerformedWork;
1888+
if ((getFiberFlags(nextFiber) & PerformedWork) === 0) {
1889+
return false;
1890+
}
1891+
if (
1892+
prevFiber != null &&
1893+
prevFiber.memoizedProps === nextFiber.memoizedProps &&
1894+
prevFiber.memoizedState === nextFiber.memoizedState &&
1895+
prevFiber.ref === nextFiber.ref
1896+
) {
1897+
// React may mark PerformedWork even if we bailed out. Double check
1898+
// that inputs actually changed before reporting a render.
1899+
return false;
1900+
}
1901+
return true;
18891902
// Note: ContextConsumer only gets PerformedWork effect in 16.3.3+
18901903
// so it won't get highlighted with React 16.3.0 to 16.3.2.
18911904
default:

0 commit comments

Comments
 (0)