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.

I don't see any existing functions doing that at this moment — keikai, Dec 12 '22 at 07:46
You want hide part of tree. It is impossible. This is how HOCs works and this is one of reasons why hooks were presented — Dmitriy Kudasov, Dec 13 '22 at 11:23
@DmitriyKudasov you can make that comment an answer I'll check it. — Archimedes Trajano, Dec 13 '22 at 13:59

score 1 · Accepted Answer · answered Dec 15 '22 at 10:31

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.

answered Dec 15 '22 at 10:31

Dmitriy Kudasov

102
5

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

1 Answers1