From 995f9da30dce23a203a37c0cfb01bf1dfc47e68e Mon Sep 17 00:00:00 2001 From: developerjhp Date: Wed, 4 Jun 2025 14:23:59 +0900 Subject: [PATCH] [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 --- .../src/backend/fiber/renderer.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 94246df6485e..e3cf0f5e0533 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -1885,7 +1885,20 @@ export function attach( // releasing DevTools in lockstep with React, we should import a // function from the reconciler instead. const PerformedWork = 0b000000000000000000000000001; - return (getFiberFlags(nextFiber) & PerformedWork) === PerformedWork; + if ((getFiberFlags(nextFiber) & PerformedWork) === 0) { + return false; + } + if ( + prevFiber != null && + prevFiber.memoizedProps === nextFiber.memoizedProps && + prevFiber.memoizedState === nextFiber.memoizedState && + prevFiber.ref === nextFiber.ref + ) { + // React may mark PerformedWork even if we bailed out. Double check + // that inputs actually changed before reporting a render. + return false; + } + return true; // Note: ContextConsumer only gets PerformedWork effect in 16.3.3+ // so it won't get highlighted with React 16.3.0 to 16.3.2. default: