react/display-name

· 2 min read · 406 Words · -Views -Comments

During development, you may encounter the ESLint error: “Component definition is missing display name (react/display-name)”. Let’s discuss what causes this and how to handle it.

react/display-name

The only benefit of adding display-name to components is for debugging purposes. As shown in the image below, it helps us quickly locate corresponding components in React developer tools, making it easier to find the source files.

However, in daily development, we often don’t explicitly write display-name. So where do these names come from? React automatically assigns them for us. Generally, components are created in two ways:

  1. Function components: The function name becomes the display-name
  2. Class components: The class name becomes the display-name

But sometimes display-name can be missing, such as when we use anonymous functions to create components, or when using React.createElement(). This creates a burden during development and debugging when trying to quickly locate the rendering component logic. Therefore, from a best practices perspective, it’s recommended to always have react/display-name, such as explicitly naming function components.

Custom display-name

As mentioned above, React uses function/class names as display-name, but we can also modify this name using componentName.displayName = 'xxxxx'

This applies to both classes and functions.

Note: The name you see in React debugging tools is not the same as the tag name we use when importing components. For example, even if you use as for aliasing during import, it won’t work as expected.

Here’s an example of a class component where we modify the displayName, and you’ll see the change reflected in debugging:

export class CardToc extends React.PureComponent {
  ...
}
CardToc.displayName = 'CardTocCustom';

eslint-react/display-name

It’s recommended to enable this ESLint rule and set it to error level.

This is our company’s practice as well.

"react/display-name": ["error"]

Table column render in antd and other component libraries

As mentioned above, we often don’t encounter this issue, but it frequently appears when doing custom rendering in table columns. First, this is not antd’s fault - for example, Tencent’s TEA form components also have this issue. The real reason is that the linter treats these as function components, but they’re actually just functions that return ReactNode. Solutions are as follows:

  1. If it’s just simple rendering, like hyperlinks, use inline disable: // eslint-disable-next-line react/display-name
  2. If it’s more complex rendering, extract it as a separate function. This way the linter will recognize it correctly, avoid errors, and improve code readability through render function extraction.

Final Thoughts

Mark.

React
Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover

Related