【ESLint】【JSX】propsにスプレッド構文を使うのは好ましくない理由

現在参画しているプロジェクトでは、ESLintのreact/jsx-props-no-spreadingを有効にし、propsにスプレッド構文を使うことは原則禁止となりました。

理由

↓のgithubの内容がわかりやすいですが、予期せぬ値が渡されてしまう可能性があるためです。また、渡したいプロパティを明示的に羅列するため、可読性の向上も見込めます。
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md

良い例

渡す必要のある値のみ、明示的に記述する。

const {src, alt} = props;
const {one_prop, two_prop} = otherProps;
<MyCustomComponent one_prop={one_prop} two_prop={two_prop} />
<img src={src} alt={alt} />

悪い例

渡す必要のない値まで、スプレッドでまるっと全部渡してしまう

<App {...props} />
<MyCustomComponent {...props} some_other_prop={some_other_prop} />
<img {...props} />