React-devtools: $r doesn't highlight Stateless Functional Components

[mgol]

Typing $r in the console prints the nearest ancestor component that is not a stateless functional one.

Test case: https://github.com/mgol/react-tic-tac-toe

When highlighted in the React DevTools, only the top-level stateful Game component is displayed when $r is typed, no matter which one is selected.

[bvaughn]

$r is a convenience pointer that will refer to either the currently selected DOM element _or_ the currently selected component _instance_. Since functional components have no instance, there's nothing for it to point to.

So basically, to me, it sounds like this is working as designed.

[mgol]

Thanks for the explanation.

One issue is that React DevTools display == $r next to the selected JSX node, whether it's a component instance or a DOM element. Having $r returns something completely different to what the UI claims is confusing. Especially that now I see it doesn't return the ancestor component but just whatever "working" thing $r pointed to previously. I guess this is the same what #929 reports. Wouldn't returning an object like:

{
    displayName: 'Board',
    props: {/* Board props */}
}

be a good idea, even if it has no direct internal presence? If you want to keep existing behavior I would keep the == $r mark next to the last selected element so that it's accurate.