Bug: profiler incorrectly reports 'The parent component rendered'

[michaelboyles]

React version: 19.0.0

Devtools version: 6.1.2 (5/7/2025)

Chrome: 136.0.7103.114

Windows 11

Steps To Reproduce

1. Go to this codesandbox link https://codesandbox.io/p/sandbox/optimistic-ritchie-forked-yhhjl4
2. Specifically open the preview in a new tab at https://yhhjl4.csb.app/ otherwise react devtools won't attach
3. Enable "Highlight updates when components render" in react dev tools
4. Click the numbered button to cause a rerender

Full code (click to show)

import { useState, useRef } from "react";

const Count = () => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
};

export function Greeting() {
  const renderCount = useRef(0);
  renderCount.current++;
  console.log("Greeting rendered");
  return <span>Hello World! (rendered {renderCount.current} times)</span>;
}

export default function App() {
  return (
    <div>
      <Count />
      <div>
        <Greeting />
      </div>
    </div>
  );
}

The current behavior

The Greeting component will flash as being rerendered even though it isn't

If you record via the profiler, the cause is given as "The parent component rendered", but it did not

The expected behavior

It neither flashes, nor is reported in the profiler flamegraph after being recorded. It didn't rerender.

---

Here's some variants I tested:

✅= Greeting correctly reported as not rerendering ❌ = Greeting incorrectly reported as rerendering

//✅ Same level
<Count />
<Greeting />

//✅ Greeting above
<div>
    <Greeting />
    <div><Count /></div>
</div>

// ❌ Greeting below in div
<Count />
<div>
    <Greeting />
</div>

// ❌ Greeting below in empty fragment 
<Count />
<>
    <Greeting />
</>

---

This is the same as #19732. Reopening here as per the directions in https://github.com/facebook/react/issues/19732#issuecomment-2061919359

[developerjhp]

I wasn’t fully certain about the intended direction of the issue, but I attempted a solution. Please let me know if any adjustments are needed. #33434

[hoxyq]

There is an issue with filtering out some elements. This data is probably not involved when we are determining if and why component re-rendered.

By default, React DevTools will filter out DOM-elements on Web. If you actually remove this filter from Components panel, it will correctly determine that these components were not re-rendered. Same for highlighting feature.

https://github.com/user-attachments/assets/166c2631-bc0d-4fe1-a57e-5d126464d6e3

Would someone be interested in triaging this further? I can try helping with code links.

[developerjhp]

@hoxyq

I'll take a look and help triage this. Please share the relevant code links or file pointers when you have a moment!

[developerjhp]

Hi @hoxyq, could you please share which specific code or file this issue was observed in?
I’d like to help triage it, but knowing where exactly in the codebase this happens would be very helpful. 🙏

[hoxyq]

Hi @hoxyq, could you please share which specific code or file this issue was observed in? I’d like to help triage it, but knowing where exactly in the codebase this happens would be very helpful. 🙏

@developerjhp, shouldFilterFiber is the function that checks if a Fiber should be ignored or not: https://github.com/facebook/react/blob/4a523489b7dc64cd397f619e50223edda1b9a321/packages/react-devtools-shared/src/backend/fiber/renderer.js#L1501

In the reproducer, the div is filtered out, but Greeting is not, which is correct, because by default React DevTools will hide DOM elements from the tree.

What is not correct is that didFiberRender was called on Greeting node for some reason, but it shouldn't be: https://github.com/facebook/react/blob/4a523489b7dc64cd397f619e50223edda1b9a321/packages/react-devtools-shared/src/backend/fiber/renderer.js#L1874

I would have expected that children of div node won't be updated (hence, didFiberRender won't be called), because it still references the same Fiber object.

This part of the implementation might be tricky, since this requires knowledge about React internals. I don't have time to prioritize this right now, unfortunately, but I am planning to do it later, since this is clearly a bug.

If you could debug this and maybe document what operations React DevTools performs on the tree, or write a test that fails, that would be really helpful.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[michaelboyles]

Bump

[kailasmanivannan]

bump