Как задать имя компоненту в React DevTools без displayName?

React DevTools определяет имя компонента, анализируя функцию, из которой он создан. Для функциональных компонентов это свойство name самой функции, а для компонентов, созданных через React.memo или forwardRef, — имя обёртки или внутренней функции. Если функция анонимная, DevTools покажет Anonymous, что затрудняет отладку.

Как React получает имя

• Именованная функция: function MyComponent() {} — имя берётся из MyComponent.
• Стрелочная функция, присвоенная переменной: const MyComponent = () => {} — имя выводится из имени переменной.
• Анонимная функция в экспорте: export default () => {} — имя будет Anonymous.

Способы задать имя без displayName

1. Использовать именованную функцию или присвоить её переменной с осмысленным именем.
2. При экспорте по умолчанию сначала объявить функцию, затем экспортировать её.
3. Для React.memo и forwardRef — передавать именованную функцию.
4. В крайнем случае — переопределить name через Object.defineProperty.

Пример

// Плохо: имя будет Anonymous
// export default () => <div>Hello</div>;

// Хорошо: имя UserCard
function UserCard() {
  return <div>Hello</div>;
}
export default UserCard;

// Или через переменную
const UserCard = () => <div>Hello</div>;
export default UserCard;

// Для memo
const MemoUserCard = React.memo(function UserCard() {
  return <div>Hello</div>;
});

Итог: чтобы DevTools показывал понятное имя без displayName, достаточно объявлять компоненты как именованные функции или присваивать их переменным с осмысленными именами — это упрощает отладку и чтение дерева компонентов.