概要
Reactを使用して開発中、パフォーマンス最適化のためにmemoを使用したところESLintに
"Component definition is missing display name eslint(react/display-name)"
と怒られてしまったときの解決方法メモ。
バージョン等
- Next.js v14.2.2(Pages Router)
- コンポーネントにはアロー関数を使用
解決方法
ファイルの最後にdisplayNameを明示的に示す。以下例。
ComponentName.displayName = "ComponentName";
なぜdisplayNameが必要なのか
displayNameは主にReactのエラーメッセージで使われ、デバッグに役立つ。もしこれが得られない場合エラーメッセージにはデフォルトでComponentと表示されるため、アプリケーションに１つ以上のコンポーネントがあるとデバッグが非常に困難になってしまうため。