React-devtools: Persist component tree expansion and selection state

[aspiers]

To reproduce:

1. Go to a React app and open up the React DevTools tab (I'm using Chrome, in case that matters)
   
   
   
   • Observe that the whole component tree is collapsed by default (which BTW I've just proposed in #348 should be changed).
   
   
2. Select & inspect some component inside the tree.
   
   
   
   • Observe that a (partial) hierarchy is now visible.
   
   
3. Reload the page (either manually or automatically by editing some source code, if you have that configured)
   
   
   
   • Observe that the whole component tree is collapsed again.
   
   

Expected behaviour

After reload, the visibility of the component hierarchy is unchanged. At least, I would expect this if the component hierarchy itself doesn't change on reload, which is the case in all my (admittedly simple) React apps.

If the tree did change then OK, I can understand that it might not be possible; for example, the previously selected component might no longer exist, and others might have also vanished. But surely it would be possible to preserve the visibility of all components which are still there? And any newly added ones could just be left collapsed, or invisible if their parent is collapsed or invisible.

Motivation

For me this greatly hampers usability, because if I'm working on a particular component, I have to reselect that component every single time I edit the source code, which is a real PITA. However I'm wondering if I've missed some really good reason why the behaviour is like that despite of the usability impact, because I see that #1 basically requested this behaviour, which I find rather mystifying! The request in #1 was justified with the following explanation:

The previously selected component is still visible in the props inspector. This can be especially confusing when comparing components before & after the reload.

But I can't understand at all why that would be confusing, and if anything, surely it's beneficial if you want to compare components before and after the reload? If the tree is auto-collapsed on reload, it makes it impossible to compare anything without first re-expanding the tree. So #1 really confuses me ...

Workaround

Select the component in the Elements tab, and then after page reload, switch to the Elements tab and immediately back to the React tab. The previously selected component will be automatically reselected. Having to do this after every page is still annoying, but quite a lot more tolerable than having to manually perform a text search for the component and select it (or worse, manually expand each ancestor of the component until it becomes visible).

Thanks for your consideration!

[mikehdt]

I would be in agreeance with this behaviour. This is in line with what the Elements tab itself does. Imagine if the Elements tab collapsed back to the tag after every refresh - it'd be madness! Especially when you're building out things early-on, it's frustrating to have the React inspector constantly collapsing back up to the top-most key.

However, I can also understand that if the React devtools were showing 'stale' data, then that makes sense. Or, if that key no longer exists (e.g. it was the result of a login or whatnot). However, I do feel that, if the key can be located again quickly after refresh, it would be ideal to re-select it.

[Brantron]

I'm happy to see there is a workaround, but it seems like implementing this feature would fit more use cases than the current behavior. I'm not sure what the use case is to collapse the tree on reload but I would love it if we could get this feature in.

[gaearon]

I totally agree this should be implemented. Just needs someone willing to figure out how to do it.

[EmSyndio]

related:
Is it possible to auto expand the tree?
In my use case, I am trying to debug tooltips. The tooltip only shows on mouse-over, but the tree is collapsed. As soon as I move the mouse to try to expand the tree, the tooltip disappears.
I resorted to using keyboard shortcuts, but it is a real pain.

is there any way to keep the tree expanded, and auto-expand when an object is rendered?

[fidellakis]

Another workaround worth mentioned is using the select React component feature (target icon) under the React tab. This will automatically uncollapse all parent React elements.

[michaelleone]

It seems to me that persisting the tree on reload (at least when the component hierarchy has not changed) should be the default behaviour. Is there an actual reason (common use case?) why this is not the case or is it simply the default behaviour (an oversight?) from day 1 that has now become too difficult/time consuming to fix?

Another workaround worth mentioned is using the select React component feature (target icon) under the React tab. This will automatically uncollapse all parent React elements.

@fidellakis - unfortunately the above only works where components are easily selectable visually, which is often not he case in React due to nesting of "components" in "container" divs etc ( and where using css z-layers/overlapping or animated components/enclosing components, modals, etc) :(

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools