devtools: Add ref to inspect element view

[everettbu]

Mirror of facebook/react#21879
Original author: eps1lon

---

Summary

Displays the ref of an inspected element if the element has one. Was a bit difficult to track a particular ref through a somewhat larger component tree.

Ref to a class instance

Ref to an Element

anonymous callback ref

named callback ref

The UI feels a bit lost since we only have a single value in this new section. Ideally we'd have the key in the view too so we could create a "Misc" view.

On the other hand, the ref will eventually be just another prop (if I understood reactjs/rfcs#107 correctly) so it'll merge with the props view eventually.

Test Plan

• Tested in shell
• CI green

[greptile-apps-staging]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[greptile-apps]

Greptile Overview

Greptile Summary

Added ref display to React DevTools inspect element view, showing ref values for class instances, DOM elements, and callback refs in a dedicated section above props.

Key changes:

• Created new InspectedElementSpecialPropsTree component to display ref values
• Backend extracts ref from fiber and formats it as string preview using formatDataForPreview
• Enhanced HTMLElement detection with cross-realm support using Object.prototype.toString pattern matching
• Added comprehensive test coverage for useRef, class refs, and callback refs
• Legacy renderer returns null for ref (not yet supported)

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• Well-structured implementation with proper type definitions, comprehensive test coverage, and careful handling of edge cases. The only minor issue is a redundant null check that doesn't affect functionality.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSpecialPropsTree.js	4/5	New component to display ref in inspect view; minor redundant null check after early return
packages/react-devtools-shared/src/backend/renderer.js	5/5	Extracted ref from fiber and formatted it for preview, correctly handling non-hydratable data
packages/react-devtools-shared/src/utils.js	5/5	Enhanced HTMLElement detection with cross-realm support using toString check

[greptile-apps]

_{11 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.