68

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 the React docs, it says:

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

Why is this so important? What will happen if I don't add it? (So far I haven't had it and had no issues debugging.)

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

Bondolin
  • 2,793
  • 7
  • 34
  • 62
Kuf
  • 17,318
  • 6
  • 67
  • 91
  • 2
    if you do not add component name will not display., and it will be hard to debug for state. But if you are using Es6 to create component (extending Component) then you do not need to add display name manually for each component. – Khalid Azam Jan 11 '17 at 08:12

4 Answers4

62

I have always set displayName to the same name as the variable I am assigning it to. This would have 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

cafebabe1991
  • 4,928
  • 2
  • 34
  • 42
kwelch
  • 2,370
  • 22
  • 23
  • How do you actually set the displayName? According to react docs it seems to be inferenced from the name of the component but doesn't say how to manually set it for non-HOCs. – gabrielwr Oct 29 '17 at 01:42
  • 4
    it is a static property. The quickest way is to set it directly, ie. `hoc.displayName = "hocName";` – kwelch Nov 13 '17 at 21:50
  • Do we need to set it on non HOC components as well @kwelch? – Shubham Jain May 19 '20 at 07:31
  • Don't forget the proper usage of this while you are mocking this component in unit test cases. `jest.mock( '../path/to/component', () => ({ __esModule: true, default: () => 'component name mock', }) );` – jay rangras Apr 07 '21 at 12:57
  • If I don't use unique displaynames for different components, will my app start experiencing weird bugs? – Embedded_Mugs Sep 02 '21 at 07:11
3

The React documentation is pretty clear about what is it for and when to use it:

The displayName string is used in debugging messages. Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component.

In most cases you don't need to set the displayName as it's inferred from the function/class name.

Camilo
  • 6,504
  • 4
  • 39
  • 60
  • 3
    I'd recommend copying in the relevant paragraph of the docs just in case the link breaks in the future. – Loren Oct 26 '22 at 12:56
2

this article helped me:

How do I get string name of React Native component class?

    class CardGroup extends Component {
      render() {
        return (
          <div>{this.props.children}</div>
        )
      }
    }
    CardGroup.propTypes = {
      children: function (props, propName, componentName) {
        const prop = props[propName]

        let error = null
        React.Children.forEach(prop, function (child) {
          if (child.type !== Card) {
            error = new Error('`' + componentName + '` children should be of type `Card`.');
          }
        })
        return error
      }
    }
Edward Koetsjarjan
  • 325
  • 2
  • 4
0

I stopped getting the error when I reformatted the component to use this syntax which allows React to infer the displayName based on the variable definition.

const LandingPage = () => {
  return (
    <div>Landing Page</div>
  );
};

export default LandingPage;
Ninjaxor
  • 876
  • 12
  • 27