paint-brush
Improving component names in React Developer Toolsby@esamatti
6,543 reads
6,543 reads

Improving component names in React Developer Tools

by Esa-Matti SuuronenFebruary 15th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

The <a href="https://github.com/facebook/react-devtools" target="_blank">React Developer Tools</a> is awesome part of React.js developer experience when digging into unknown code bases — or your own after a while.

Company Mentioned

Mention Thumbnail
featured image - Improving component names in React Developer Tools
Esa-Matti Suuronen HackerNoon profile picture

The React Developer Tools is awesome part of React.js developer experience when digging into unknown code bases — or your own after a while.

But sometimes it just fails and displays your component names as <Unknown>. Why? Let’s go through the different components types to see how the name is set on them and let’s examine why sometimes it’s not there. Finally we’ll see what can be done about it.

I’m assuming EcmaScript spec 2015 or later here.

Function Declarations



function MyFun(){return <div>function component</div>;}

JavaScript has a simple reflection API for function names

MyFun.name === “MyFun”

Classes





class MyClass extends React.Component {render() {return <div>class component</div>;}}

As you might know JavaScript classes are just syntax for the prototypal inheritance which means that classes are just functions. So the function reflection API works here too

MyClass.name === “Myclass”

Arrow Function Expressions



const ArrowFn = () => (<div>arrow fn</div>);

This works as expected too. The name is inferred from the variable declaration by the JavaScript engine

ArrowFn.name === “ArrowFn”

React.createClass()





var OldClass = React.createClass({render() {return <div>old class</div>}});

In this case there is nothing JavaScript engines can do. Luckily the babel-plugin-transform-react-display-name of the Babel React preset steps in here and transpiles the variable name into a displayName property of the component




var OldClass = React.createClass({displayName: “OldClass”,...});

Failures

When you generate components dynamically like



const simple = (Component, styles) => (props => <Component {...props} style={styles} />;);



const Button = simple("b", {padding: 20,});

Button.name and Button.displayName will be empty because in this case the name cannot be inferred by the JavaScript engine or the Babel plugin. They don’t know that the simple() function returns a React component.

Custom names

To help out this situation you can set the displayName property manually. On function components the devtools will prefer the name on the displayName property over the name property if both are set.





const simple = (Component, styles) => {const Wrapped = props => <Component {...props} style={styles} />;Wrapped.displayName = `simple(${getName(Component)})`;return Wrapped;};

But this way you can get at best names like

Inspired by the display name transform plugin I created an additional display name Babel plugin:

babel-plugin-display-name-custom

With it you can configure which functions in your project create new React components and have the display names automatically inferred for them.

It would transpile the above example to




const Button = simple("div", {padding: 20,});Button.displayName = "Button";

Checkout the Github page for more information

https://github.com/epeli/babel-plugin-display-name-custom

P.S.

If you like the above API style of the simple() example — checkout react-simple on Github for a production implementation of it for the web and React Native. The Babel plugin was initially created as part of it.

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising &sponsorship opportunities.

To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!