What is displayName in React?

9 points
Asked by:

When I use following component in my project:

Code below:

import React, { memo } from 'react';

const MemoComponent = memo(() => <span>My Component</span>);

I get from eslint message:

Component definition is missing display name eslint(react/display-name)

So my question is: What is displayName in React?

1 answer
2 points
Answered by:

At first use instead your code following code:

import React, { memo } from 'react';

const Component = () => <span>My Component</span>;
const MemoComponent = memo(Component);

It is good to create component and later wrap it with memo() - it gives transpiler hint what displayName is set for your component (Component const name is used to set displayName).

About message:


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, see Wrap the Display Name for Easy Debugging for details.

It is from react documentation:

0 comments Add comment
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂