React-devtools: 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 https://github.com/facebook/react-devtools/pull/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 https://github.com/facebook/react-devtools/pull/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).

[develleoper]

Was excited to see this issue open, as it addresses one of my primary complaints with HOC's (and was exacerbated by recent switch to React.createContext), but it seems to have had no discussion in the last year. Has the conversation moved elsewhere, or is it just deprioritized / awaiting submissions?

EDIT: my apologies, I just noticed there is a lot more recent activity in issue 1076. feel free to disregard! 😅

[SavePointSam]

the new React DevTools just merged support for this (in regards to HOCs). You can also create custom filters based on RegExp patterns.

[develleoper]

Oh, that's awesome! I tried out the beta that was mentioned in the other issue, and it works great, but I'm excited to see all the new features in the full final release. 🙂

[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