$r points to wrong component, doesn't update on select

[ovidiuch]

Minimal reproducing project: https://github.com/react-cosmos/react-cosmos. Not minimal in number of deps, sorry! It will take a minute or two for yarn to bootstrap deps. But minimal in number of steps: Run yarn start.

Before diving in, here is what I'm experiencing

$r always points to the same component (not a root nor a leaf), regardless of what I select.

Possible area of conflict: The Cosmos Playground has two frames, the top one with the menu and the iframe with the loaded components. They come from different bundles with different copies of React in each, and the inner frame attaches __REACT_DEVTOOLS_GLOBAL_HOOK__ to the parent window, which is why they both show up in the React tab. As far as the React tab is concerned, components from both bundles show up and their correct info is shown when selected. Only problem is $r doesn't point to the selected component in the Console.

Let me know if there's anything else I can provide or if you have suggestions for what to debug on my end. Thanks!

[RocketPuppy]

I'm seeing this as well on an app developed locally, not in Cosmos. $r always points to the first thing selected and does not update. React 16, React Dev Tools extension 2.5.2, chrome 61.0.3163.79

[RocketPuppy]

Digging into the __REACT_DEVTOOLS_GLOBAL_HOOK__ it seems as if very few of my components have a public instance. This runs when a component is selected in the React tab:

	    _this.on('selected', function (id) {
	      var data = _this.elementData.get(id);
	      if (data && data.publicInstance && _this.global.$r === lastSelected) {
	        _this.global.$r = data.publicInstance;
	        lastSelected = data.publicInstance;
	      }
	    });

And data.publicInstance always seems to be null for components I've written, but is present for native DOM components and library components. I'm also using Typescript.

[michelmattos]

It seems to happen only with functional components. If you change your component to be a stateful one, then you will be able to select it (and $r will work fine). Maybe data.publicInstance is being set to null because functional components don't have an instance?

[RocketPuppy]

That makes sense @michelmattos! My project is almost all functional components.

[sina-mist]

$r not updating on stateful component for me

[bvaughn]

Closed by #1281