DEV Community

Discussion on: React DevTools and Unknown Components

Collapse
 
dan_abramov profile image
Dan Abramov

To clarify some points.

No real surprise here, React can easily decipher the name of your component. What if we export the class directly?

The problem isn't with "exporting component directly". The problem is that you didn't give it a name.

Your code looks like this:

export default class extends React.Component {
  // ...
}

The class doesn't have a name. If you give it a name this won't be a problem (even though you still "export it directly"):

export default class MyComponent extends React.Component {
  // ...
}

Despite defining a name for our higher-order component, the name gets lost in the DevTools.

This isn't some problem inherent to HOCs themselves. The problem is in how HOC is defined. If it doesn't a class/function with a name... well, you know the rest. :-)

So you can totally write a HOC that adds a reasonable name, just follow the same suggestions you already wrote, but for the returned class itself.

Collapse
 
fargrim profile image
Kyle Blake

Dan,

Along with trying to help others, this post is just as much for me to see how well I understand a topic. I really appreciate that you took the time to read my post and offer up such helpful feedback because it not only improves the post, but it improves my knowledge on the topic.

I follow a lot of topics around React and Redux, so having you personally respond to this post blows my mind! Something I wouldn't have ever expected, so thank you again!