Functional Componentで’missing display name’

ESLintででる
Component definition is missing display name react/display-name

デバッグのために、全てのコンポーネントに名前を付けることが推奨されるているため、無名関数だと怒られる。
回避方法はコンポーネントに対して名前をつけてあげることで解消される。

const Hoge = (props: HogeProps) => {
  // 無名関数になってしまう
  return ( props ) => <div {...props}>;
}

この場合、Hoge関数内部で定義する必要がある

const Hoge = (props: HogeProps) => {
  const Element = (props: HogeProps) =>  <div {...props} />
  return Element;
}

パターンとしてFowardRefなんかを使用したときにこのエラーが発生する
上記であげた方法以外にもこのような書き方でエラーを回避することもできる。

Hoge.displayName = 'hogehoge';

実際名前がなくても大丈夫な場合、ESLintのコメントアウトでエラーを回避してしまうのもあり

// eslint-disable-next-line react/display-name

RyotArchLog