【React】コンポーネントのメモ化で怒られる / ESLint: Component definition is missing display name(react/display-name)

はじめに

コンポーネントのメモ化を試みたところESLintで怒られた、のでその時の対処法。
メモ化

memo(コンポーネント);

「コンポーネントの定義に表示名がない」と言われている

ESLint: Component definition is missing display name(react/display-name)

開発環境でのデバッグ時に、複数のコンポーネントが存在する場合エラーメッセージからのデバッグが難しくなってしまう。
ということがあってこのように怒られるらしい。

サンプルコード

怒られる

// ESLint: Component definition is missing display name(react/display-name)
export const Foo: React.VFC = memo(function foo() {
  return <div>memoサンプル</div>;
});

解決策

無名関数から普通の名前付き関数にする

export const Foo: React.VFC = memo(function foo() {
  return <div>memoサンプル</div>;
});

ESLintを部分的に disable にする

// eslint-disable-next-line react/display-name
export const Foo: React.VFC = memo(() => {
  return <div>memoサンプル</div>;
});

最後に

ESLintの設定でそもそも回避できると思いますが、そこまで調べられておらず。