Как React.memo с анонимной функцией отображается в React DevTools?

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

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

• Сначала проверяется displayName — это самый надёжный способ задать имя.
• Затем берётся function.name — работает только для именованных функций.
• Если ничего нет — выводится Anonymous или Memo(Anonymous).

Когда вы пишете React.memo(() => ...), исходная функция анонимна, поэтому её name пустой. Обёртка memo тоже не имеет displayName, и в дереве компонентов вы увидите что-то вроде Anonymous или Memo(Anonymous). Это затрудняет отладку: непонятно, какой именно компонент рендерится.

Пример

// Плохо: в DevTools будет Anonymous
const Button = React.memo(() => <button>Click</button>);

// Хорошо: именованная функция
const Button = React.memo(function Button() {
  return <button>Click</button>;
});

// Тоже хорошо: явный displayName
const Button = React.memo(() => <button>Click</button>);
Button.displayName = 'Button';

В первом случае DevTools покажет Anonymous, во втором — Button, в третьем — тоже Button. Именование критично при работе с большим деревом компонентов и профилировщиком: без имён сложно понять, какой компонент вызывает лишние рендеры.

Практические рекомендации

1. Всегда давайте компонентам имена — либо через именованную функцию, либо через displayName.
2. Для memo-компонентов задавайте displayName после обёртки, иначе имя потеряется.
3. Помните, что React.memo не влияет на имя исходной функции — он создаёт новую обёртку.

Итог: применяйте displayName или именованные функции для memo-компонентов, чтобы React DevTools и Profiler показывали осмысленные имена и упрощали отладку производительности.