[DevTools Bug]: Unnecessary Re-render Highlight on Sibling Component in React DevTools

[yuki2006]

Website or app

https://codesandbox.io/p/sandbox/agitated-monad-h4ykn2?file=%2Fsrc%2FApp.js%3A12%2C13

Repro steps

• Open the provided CodeSandbox
• Click the "Open in new Tab" button in the sandbox preview.
• Open the React DevTools panel.
• In the DevTools settings, enable "Highlight updates when components render".
• Observe that the Test button(B) is highlighted every time the timer value changes.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

[xabierlameiro]

Thanks for reporting this! This appears to be a known issue with React DevTools where components that are siblings to re-rendering components get incorrectly highlighted as having rendered themselves.

This is actually the same bug as #32484 and #33423, which both describe identical behavior where memoized or unchanged sibling components are incorrectly highlighted as re-rendering.

What's happening:

The DevTools "Highlight updates when components render" feature has an issue with its reconciliation logic that incorrectly marks sibling components as having rendered when their parent component renders, even when those siblings do not actually re-render.

In your CodeSandbox example, when the timer value changes (causing the parent component to re-render), the Test button component gets highlighted even though it has not actually rendered - this is exactly the same pattern described in the other issues.

Workarounds:

1. Use React.memo() - Wrapping the sibling component in React.memo() sometimes helps the DevTools better detect that it did not re-render
2. Move components to the same level - As noted in Bug: profiler incorrectly reports 'The parent component rendered' #33423, putting components at the same hierarchy level sometimes avoids this false positive
3. Use the Profiler tab instead - The Profiler tab in DevTools is generally more accurate for detecting actual re-renders

Official status:

This is a confirmed bug in React DevTools that affects the visual highlighting feature. The React team is aware of it, as evidenced by the multiple similar reports. The actual component behavior is correct - only the DevTools highlighting is inaccurate.

You can track progress on this issue by following the related issues linked above. The bug does not affect your app's performance, it is purely a DevTools visualization issue.

[marcospgp]

if there are multiple issues for this, please consider picking a main one and closing the others so discussion can be centralized

also as an additional workaround I'd recommend people look into react scan