DevTools Components Hide components filter should hide the component it owns

[ricardo-reis-1970]

When I go to the Components tab of the React DevTools, I have an option to hide components in:

Settings > Components > Hide components where...

In this I can hide a component based on its name. The issue is that among many others I have a component called Period that has a ton of components underneath it because it uses React Datepicker. I add a rule like:

^ name matches Period

but all it hides is the entry for my component. I obviously expected to hide it together with all its descendants, but instead the very single line called Period vanishes from the tree, and now the tons of subcomponents (Datepicker, remember?) are all there as if hanging directly from the Period's parent component.

React version: 18.2.0 DevTools version: 5.2.0-1717ab0171

Steps To Reproduce

1. create a React page with any component hierarchy with more than 2 levels
2. in React DevTools > Components, go to Settings > Components > Hide components where...
3. filter out a component by name
4. now you'll see that the component that you filtered out disappeared, but its descendants are still all there, attached to the component's parent.

Link to code example:

My code is corporate and therefore cannot be shared. However, the description I gave and the steps to reproduce are quite unmistakable. This is not a circumstance bug on my code.

The current behavior

Currently, if I want to hide a component and all its descendants, I would need to add these one by one to the filters, which becomes highly impractical very soon.

Furthermore, in hiding components under the component I'm trying to hide, I might be hiding components elsewhere with the same name that I need not hide.

The expected behavior

I'm not sure what purpose this serves, but this is really not practical. There should at the very least be an option for physical filter and logical filter, where physical would be "every instance of this name" and logical would be "every instance of this name AND its descendants".

Other improvements would be selecting components to be collapsed by default (like filtering out, but with the option to see them).

Finally, not sure this is intended, but filtering is case insensitive. JavaScript is not.

[eps1lon]

Do you mean every child or only the children it explicitly renders e.g.

function Period({ children }) {
  //      vvv hide this component when hiding `Period`
  return <div>{children}</div>
  //           ^^^^^^^^ What about these components?
}

[ricardo-reis-1970]

Hi Sebastian.

Thank you for the quick reply. Here's my Profile component:

As you see, the component Period has a lot of stuff. All I can do is collapse it and get to this state:

The issue is that when I filter out `Period, this is what I get:

Now, all the descendants of Period — DatePicker, NumberInput, etc. — are still in the tree, hanging directly from Profile and essentially making it even worse than before.

When I filter out one component, I don't expect a kind of a grep -v`` on that component's entries (what I called a *physical* filtering). I expect a *logical* filtering whereby I just hide the componentPeriodand all its children, essentially pruningPeriod` from the tree.

Collapsibles

Also (and for later), it would be really useful if I could also filter-collapse, as in saying that these components start collapsed in the tree view. This way, the collapsed components could always be open for inspection, but they would start "out of the way".

And here's how I thought this could be achieved: same way as you refresh the page and the tools highlight the last component yu highlighted, because of React::DevTools::lastSelection in sessionStorage, maybe something like that could also be implemented for this. Something like React::DevTools::collapsed, or React::DevTools::folded, whose value was a list of paths to fold.

Many thanks Ricardo

[eps1lon]

So

function Period({ children }) {
  //      vvv hide this if you filter out Period
  return <div>{children}</div>
  //           ^^^^^^^^ Hide this as well when you filter out Period
}

I don't think that's the right default here. Period could be a 3rd party component while children could be something you passed in. You wouldn't always want to filter children just because you filter Period. Maybe as an extra option. Would need so design work though to not overwhelm the UI.

[ricardo-reis-1970]

Hi @eps1lon.

Any updates on this?

When you say that what I'm asking is not the right default, you're right: it's neither the right default, nor any sort of default, because it's not even a possibility. I respectfully believe it shoudl at least be possible.

Allow me to reiterate: the subcomponents of my Period component are all from React Date Picker and all they contribute is noise. I spend a ton of time just collapsing these every single time I need to refresh the page. You obviously know that page refreshes are something we do in development every 30 seconds.

On one hand, I understand why the option would be to remove the component from the tree and show its children. You might still be interested in the children.

On the other hand, much as I think of it, I'm not coming up with a lot of examples where what I just said actually happens. In most cases, I just want to prune a lot of noise and focus on a particular branch. In the above case, I would either:

• add every single sub-component of Period — meaning every single thing that React Date Pcker decides to throw out there! — in my exclusions list, one by one, and risking removing similarly-named components from other parts of the tree where I might still wish t see them, or
• stick to the current very unpractical and inconvenient practice of collapsing all the unwanted components. Mind you, these are unwanted in the tree view for inspection / debugging. In the app itself they are obviously wanted.

You said:

You wouldn't always want to filter children just because you filter Period.

Well, we developers are in control of our own code and we tend to know what we are doing. How about not "always" but at the very least "whenever I decide I want that"? As in, give me the possibility, please. The way I see this would possibly be either accepting regular expressions like Period/* or having a checkbox for "Hide children as well"

Alternatively

Further to the above, another massive improvement would be to allow some components to at least start collapsed. To this day I haven't found a way to automate the Components panel, so I am stuck with doing this manually at every F5.

I bet my entire career (30 years!) that this would not be a feature to make one guy (me) happy.