React.memoにおける「Component definition is missing display name(react/display-name)」の対処法

執筆日: 2021-08-22

概要

React.memoを使用したコンポーネントにて、
Component definition is missing display name(react/display-name)
という警告がでます。

この場合の対処法を紹介します。

どんな場合に起こったのか

以下、childコンポーネントがあり、React.memoを使用しています。

この場合に警告が発生します。

import { memo } from 'react'

// Component definition is missing display name(react/display-name)
const Child = memo(({ title }) => {
  console.log(`render child component`)

  return (
    <div>
      {title}
    </div>
  )
})

export default Child

原因

コンポーネント名が検知されず「無名関数として検知されたので、コンポーネント名をつけてね」という警告です。

どうやらコンポーネントに直接memoを使用すると、コンポーネント名が検知されないようです。

対処法

以下のように修正すると、コンポーネント名を検知してくれます。

import { memo } from 'react'

const Child = ({ title }) => {
  console.log(`render child component`)

  return (
    <div>
      {title}
    </div>
  )
}
// ここでメモ化する
export default memo(Child)

issueの中に解決策がありました。
https://github.com/yannickcr/eslint-plugin-react/issues/2133

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店