[DevTools]: More compact rendering of deeply nested component trees when there is a single child

[vjpr]

On Reddit.com:

It's a very common pattern in React to have deep chains of components with only one single child.

Options

a. VSCode style

This problem is also enountered in Java project trees.

VSCode does it like this:

https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#compact-folders-in-explorer

IntelliJ similar.

Maybe we could do the same as VSCode?

b. No indent for single child

Another approach would be to just not indent when there is only one child.

  h
  Context.Provider - {props: {foo: 1}}
  I
  Context.Provider
  E
  Context.Provider
  Context.Provider
  Context.Provider
  l
- Context.Provider (2 children - collapse all)

    mg
    d
    Context.Provider
  + Component (1 child - expand all)

    vg
    hg
    Context.Provider
  + hg (1 child - expand all)

We could also indicate when there are multiple children and provide some controls to collapse all the children's children. This would help with https://github.com/facebook/react/issues/16463.

Advantage: As another feature I'd also be interested in adding some inline annotations to the right of each component to show some props to better identify components. Moving these nested trees horizontal would block this ability, so this approach works better.

Design decision: Where to place the arrow to toggle folding? At the first element with multiple children (indicated above)? Or at the top. Or maybe we can create a really tall button on hover to show.

Design decision: How to clearly and visually deliniate that the components are nested vs siblings. Maybe we need to add an extra space (as shown in example above). Maybe color coding as well. Or alternate grey shading.

Related

• https://github.com/facebook/react/issues/16463
• https://github.com/facebook/react/issues/16735

[lunaruan]

Hey! Thanks for the suggestions! I think they definitely have potential and, I have some initial thoughts: a. This seems like an interesting solution. It would make it easier to navigate the tree and might help with being able to figure out how many children a parent has. One difference between React DevTools and VSCode/IntelliJ though is that React could have arbitrarily long chains (vs file structures which are usually only so deep). Also, React components tend to have information, so we'd have to figure out the best way for developers to be able to access that (though that shouldn't be too hard). b. This is also an interesting solution. We'd need a way to denote whether a component is a sibling or a single child of the parent component though.

Overall this is a really interesting idea though, and we'd love to think about this further!