Expose meaningful $r as fallback for function components

[gaearon]

Fixes #1142, #645, #929. This is a minimally invasive fix.

Before:

After:

Kinda works with Hooks too:

For Hooks state, this exposes our internal implementation but I think it's better than nothing if you're debugging. We can later improve it to flatten the list into an array or even show a tree representation.

I made it a fallback and not just for functions in case you want to inspect props of some exotic type. I see nothing wrong with that.

(I also used this as an opportunity to make it work for text nodes too.)

[bvaughn]

I think this change looks safe 👍 😄

[Jessidhia]

How come I missed this this is brilliant 🎉

Gone will be the days where I literally go spelunking around __reactInternalFiber's children / next / returns to be able to look at a component's relevant fiber state

[gaearon]

You and me, @Jessidhia, you and me.

[gaearon]

(On the other hand, isn't it a nice primer to React internal data structure? 😆)

[yfain]

I'm using version 3.6 of this extension in Chrome, but the issue is still there, e.g. $r is not defined for functional components. Is there a newer build of this extension that includes this fix?

[bvaughn]

@yfain This version of the extension isn't getting a lot of focus right now, because we're trying to finish up and release the new one. I'd suggest just hopping on the beta train for that one 😄

https://github.com/bvaughn/react-devtools-experimental#installation