Is it Possible to Rename Recompose HOC (For Better Stack Traces)?

Question

I love recompose, but when I use it I wind up with stack traces that have lines like:

in withProps(withHandlers(withHandlers(SelectionOverlay))) (created by withState(withProps(withHandlers(withHandlers(SelectionOverlay)))))

Is there any way I can give some sort of "display name" to the individual HOC components to get more readable stack traces?

Answer 1

There is a setDisplayName method available that seems to do what you are asking - https://github.com/acdlite/recompose/blob/master/docs/API.md#setdisplayname

Answer 2

Checkout this section: https://github.com/acdlite/recompose#build-your-own-libraries

I believe you can just assign a static property to your component called displayName and that will be passed through to stack traces as well as the React chrome extension.

So if your HOC is composed like this, you can just write:

const MyComponent = withProps(withHandlers(withHandlers(SelectionOverlay)))

MyComponent.displayName = "ArbitraryValue"