How can I make a chain of HoC appear as a single component in React DevTools?

Question

I'd like to have my HoCs do as little as possible for what they need. (e.g. withI18n, withStyled, withNativeFontFamily)

So if I had something like

const MyText = withI18n(withStyled(withNativeFontFamily(Text)));

I'd like to show in React DevTools as

<MyText>
  <Text>
</MyText>

Instead I get something like this which is one component per HoC.

Is it possible to do without the obvious refactor your HoC chain into a single method. Because though that may be easy to do, setting up the types would be hard.

Answer 1

You want hide part of tree. It is impossible. This is how HOCs works and this is one of reasons why hooks were presented.