Zenn
🕌

ESLintのreact/require-default-propsはOFFにしよう

2024/01/21に公開
React
ESLint
#
props
tech

問題

下記のようなReactコンポーネントのPropsの型定義を書く。

type FieldProps = {
  children: React.ReactNode
  label?: string
  className?: string
}

labelとclassNameはoptionalなので、デフォルト値をdefaultPropsで定義しろと、
ESLintのエラーが出てしまう😥

propType "label" is not required, but has no corresponding defaultProps declaration. eslint(react/require-default-props)

これはどう対処するのがよいか？🙄

結論

今どきはReactのdefaultPropsは使わず、デフォルト引数を使う方が推奨らしいので、
このルールはOFFにしておいて問題なさそう⭐

'react/require-default-props': 'off',

デフォルト引数を使ってデフォルト値を設定する例：

export const Field = ({
  children,
  label = 'デフォルト',
  className = 'text-sm',
}: FieldWrapperProps) => {
  return (
    {/* 中略 */
  )

補足

人気のairbnbのルールを導入している場合は、デフォルトで下記のようになっているので、
自分で上書きしてOFFにする必要がある。

'react/require-default-props': ['error', {
  forbidDefaultForRequired: true,
}],

参照: https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react.js#L390-L394

Discussion