Top community members
All Questions Ask Question

Welcome to Dirask IT community! ❤ 💻
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

What is displayName in React?

1 answers
3 points

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 answers
2 points

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:

displayName

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:

https://reactjs.org/docs/react-component.html#displayname

0 comments Add comment

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more