How to map React components to DOM nodes without refs in devtools?

This is not an issue with react-devtools-experimental (which looks great btw!) but it is somewhat related to creating React devtools so I thought this could be a good place to ask. Sorry if not!

I'm trying to understand how to map React components to DOM nodes without using the official ref api.

I'm working on a Chrome extension that adds a new pane into the Elements section of Chrome devtools. When you inspect an element on the page, it gives you some additional information about what (CSS in JS in React) styles were applied. Those styles are known only in runtime since they can be dynamic (based on props).

To make this happen, we create a data-structure that maps DOM nodes (their refs) to the styles data. But afaik, the only way how to get access to the underlying DOM node in React is to use the ref prop. So we create a ref for every single styled React component. It (almost) works but it seems pretty hacky. There are various problems like composing refs when user is passing their own ref already..

TLDR; Is there some undocumented / dev-only React API that could help us to build this map without adding ref to every single component?

This is how the extension gets the styles data from the element.

I'd prefer to keep GH issues here focused on DevTools 😄 just so they're easier to manage. That being said...

TLDR; Is there some undocumented / dev-only React API that could help us to build this map without adding ref to every single component?

There is a private/internal API that React/DevTools use, but we do not suggest using it as internal data structures may change in non-backwards compatible ways with any future release. Because of this, we intentionally randomize the attribute. That being said, it can be identified with JS:

react-devtools-experimental/src/backend/views/Overlay.js

Lines 288 to 290 in 6c8ae70

    
           let internalKey = Object.keys(node).find( 
        
             key => key.indexOf('__reactInternalInstance') === 0 
        
           );

But you would be using it at your own risk. 😄

	let internalKey = Object.keys(node).find(
	key => key.indexOf('__reactInternalInstance') === 0
	);