feature request: dont show Components with regards to arbitrary exclude list (basically, hide repetitive High-Order Components from the Tree)

[iamstarkov]

Based on #211.

It would be nice, to have a exclude list of components, which i dont want to see in my react tree.

Exclude list have to be configurable and persistent.

Exclude list: [/GetContext*/, /Jss*/]

Tree Before:

<ButtonGroup>
  <GetContext(Jss(Button))>
    <Jss(Button)>
      <Button>
        <span>one</span>
      <Button>
    <Jss(Button)>
  </GetContext(Jss(Button))>
  <GetContext(Jss(Button))>
    <Jss(Button)>
      <Button>
        <span>two</span>
      <Button>
    <Jss(Button)>
  </GetContext(Jss(Button))>
  <GetContext(Jss(Button))>
    <Jss(Button)>
      <Button>
        <span>three</span>
      <Button>
    <Jss(Button)>
  </GetContext(Jss(Button))>
<ButtonGroup>

Tree After:

<ButtonGroup>
  <Button>
    <span>one</span>
  <Button>
  <Button>
    <span>two</span>
  <Button>
  <Button>
    <span>three</span>
  <Button>
<ButtonGroup>

[gaearon]

Also see the discussion in #503.
I think @jaredly started working on a generic blacklisting solution but didn’t finish it (?)

Do you want to propose a mockup for how it would work?

[iamstarkov]

@gaearon what do you mean by mockup?

[shriah]

Something like this should work for initial implementation right ? I tried to copy the blackboxing setting of Chrome. I modified the Preferences Panel to look more like chrome settings.

[drcmda]

@gaearon @iamstarkov is blacklisting really the way to go? Any random app will cause thousands of random hoc's. It would be pretty tough to create a blacklist and maintain them from project to project. Using something like ant-design for instance covers any element in triggers, wrappers, tooltips, animationlayers, etc. Then our own routes, connects, providers, error-boundaries on top and the result is something like this:

In the majority of all cases i do not look for container hocs, i find it therefore hard to use dev tools. I am faster with hot-reload and console.log(this.props) than finding back the component i would like to inspect in the tree.

If there'd be a easy-to-reach checkbox that eliminates all components that don't end up outputting a dom/target element, that would be super useful. A checkbox that eliminates node_module components would also be great.

[iamstarkov]

is blacklisting really the way to go? Any random app will cause thousands of random hoc's. It would be pretty tough to create a blacklist and maintain them from project to project.

would be pretty tough to create a blacklist and maintain

@drcmda no, not really. its simple RegExp https://regexr.com/3h9ib /[\(*\)]{1}/gim for example

[Jessidhia]

How about a Symbol.for('react.devtools.hide') property that can be set on the constructor/SFC?

Your HOC generator functions can then set that property on the generated components.

EDIT: made a quick implementation at #997

[markerikson]

This is especially needed with the new React.createContext() API, as all uses of MyContext.Provider and MyContext.Consumer show up in the tree.

It would be particularly nice if there was a checkbox to hide all "built-in React plumbing" component types (context, async/strict mode, etc).