What is React component 'displayName' is used for?

reactjs eslint
Kuf picture Kuf · Jan 11, 2017 · Viewed 25.4k times · Source

I know that is it considered a good practice to name react component by adding a displayName property, but not sure I know why. In react docs, it say:

The displayName string is used in debugging messages. JSX sets this value automatically; see JSX in Depth.

Why is is so important? what will happen if I won't add it? (so far I didn't have it and had no issues debugging)

Are there any recommendations / good practices on how to name the components?

Answer

kwelch picture kwelch · Jan 11, 2017

I have always set displayName to the same name as the variable I am assigning it to. This is would only been used in development builds as it is removed through dead-code elimination on production builds and should not be relied on within your application.

As for where it is used, that is mainly within react error messaging. This is why it is mentioned to be valuable for debugging. If no name can be derived the error messages default to say Component which is extremely difficult to debug, when you have any more than 1 component in your project.

Here are a few error messages that reference displayName in the react source:

Invalid Return

Inline style error

Related questions

How to fix missing dependency warning when using useEffect React Hook?

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it …

Read More
ESLint Parsing error: Unexpected token

With this code: import React from 'react'; import { Link } from 'react-router'; import { View, NavBar } from 'amazeui-touch'; import * as Pages from '../components'; const { Home, ...Components } = Pages; I get this eslint error: 7:16 error Parsing error: Unexpected token .. Why? Here is my …

Read More
React eslint error missing in props validation

I have the next code, eslint throw: react/prop-types onClickOut; is missing in props validation react/prop-types children; is missing in props validation propTypes was defined but eslint does not recognize it. import React, { Component, PropTypes } from 'react'; class IxClickOut …

Read More