How to set displayName in a functional component [ React ]

React function components (Function Components) typically obtain their displayName automatically through the function name. However, in certain cases, you may need to manually set or modify this value, especially when using Higher-Order Components (HOC) or similar scenarios, which helps identify components more clearly in Developer Tools.

To manually set displayName in a function component, you can do the following:

jsx
// Define your function component
const MyComponent = () => {
  // Component logic
  return <div>Some content</div>;
};

// Manually set displayName
MyComponent.displayName = 'CustomDisplayName';

export default MyComponent;

As shown in the example above, even though the component is named MyComponent, the name displayed in React Developer Tools will be CustomDisplayName.

When using component expressions or exporting components as properties of other components, setting displayName is particularly useful. For example:

jsx
const SomeLibrary = {
  // ...
};

SomeLibrary.MyComponent = () => {
  return <div>Library content</div>;
};

SomeLibrary.MyComponent.displayName = 'SomeLibrary.MyComponent';

export { SomeLibrary };

In this example, we set a displayName for the MyComponent property of the SomeLibrary object, which helps developers better identify component hierarchy when using the library.