Bug: In a recursive components, `_debugSource` doesn't get updated

[vlad-karnauch]

with the following component:

export default function App({ title }: { title?: string }) {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setIsLoading(false);
  }, []);

  if (isLoading || !title) {
    return <div data-id="line12">Loading...</div>;
  }

  return (
    <div data-id="line-15">
      Loaded
      <App />
    </div>
  );
}

when react-dom updates the div (the one with data-id="line12" to the one with data-id="line-15")
it doesn't update _debugSource attribute on the fiber, that's why devtools displays the wrong line number
(see image below)

React version:
18.*

Steps To Reproduce

1. clone the github repo below
2. start the project and open it in the browser
3. open react-devtools
4. select the root div element inside App
   The source location is wrong.

Or, you can open the following codesandbox:
codesandbox
open the preview in a separate browser tab, and see the issue in devtools

Link to code example:

github-repo

The current behavior

The expected behavior

source in react devtools should be App.tsx:15

[MeenuyD]

Hello @vlad-karnauch I think so To ensure that the correct line number is displayed, you can make a small adjustment to your code by wrapping the content of the return statement in a <React.Fragment> or

This will create a new wrapper element, allowing React to update the correct DOM node and associate it with the correct line number. By wrapping the content in a <React.Fragment> or a

the DOM node associated with the line number in DevTools will be correctly updated when React renders the component.

[vlad-karnauch]

Hello, @MeenuyD , we're levereging devtools api to run user code, so unfortunatly, I don't have control over what code is being run.

[MeenuyD]

Yes @vlad-karnauch you are correct the react developer tool does not work properly this issue is the proper line is also with me I thought it will be working.

[github-actions]

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!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!