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

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"

Answer 2

有可用的setDisplayName方法似乎可以完成您要问的事情setDisplayName : //github.com/acdlite/recompose/blob/master/docs/API.md#setdisplayname

Answer 3

Instead of using setDisplayName all over the place, you may want to try recompact which aims to solve exactly the problem of awful nesting of recompose ed components.

As a pleasant addition, benchmarks shows it's a bit faster than recompose .