On my project, I\u2019ve been noticing code like this:<\/p>\n
class Header extends React.Component {\r\n static propTypes = {\r\n items: PropTypes.array,\r\n counters: PropTypes.object,\r\n };\r\n \r\n \/\/ ...\r\n}\r\n<\/code><\/pre>\nThis is how it should look like instead:<\/p>\n
class Header extends React.Component {\r\n static propTypes = {\r\n items: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n name: PropTypes.string.isRequired,\r\n link: PropTypes.string.isRequired,\r\n })).isRequired,\r\n counters: PropTypes.objectOf(PropTypes.number).isRequired,\r\n };\r\n\r\n \/\/ ...\r\n}\r\n<\/code><\/pre>\nThe difference is that in the latter component, propTypes are much more detailed. It\u2019s better for two reasons:<\/p>\n
\n- React validates your props better.<\/strong> In the former component, you won\u2019t get any warnings if you pass a wrong array into
items<\/code> or if you forget to pass it at all. Instead, you\u2019ll have a wrong rendering result or a runtime error and will have to debug it.<\/li>\n- \n
You understand the interface of the component easier.<\/strong> This is even more important.<\/p>\nWith the latter component, to understand the structure of items<\/code>, you just look at its propTypes. With the former one, you have to dive into its code. It\u2019s not a problem when the component has been created just 10 minutes before, and you remember what it accepts, but it makes further support way<\/em> easier.<\/p>\n<\/li>\n<\/ul>\nThere\u2019s only one case when I find it acceptable to skip some propTypes definitions. It\u2019s when your component just passes a prop to a child component and doesn\u2019t care about its structure. In this case, the child component should validate the prop:<\/p>\n
\nNote how the items<\/code>
\npropType in Header<\/code> cares only about the id<\/code> field it uses, and counters<\/code> doesn\u2019t care about its items type at all.<\/div>\n\nclass Header extends React.Component {\r\n static propTypes = {\r\n items: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n })).isRequired,\r\n counters: PropTypes.objectOf(PropTypes.any).isRequired,\r\n };\r\n\r\n render() {\r\n return <div>\r\n {this.props.items.map(item =>\r\n <HeaderItem item={item} counter={this.props.counters[item.id]} \/>\r\n }\r\n <\/div>;\r\n }\r\n}\r\n\r\nclass HeaderItem extends React.Component {\r\n static propTypes = {\r\n item: PropTypes.shape({\r\n name: PropTypes.string.isRequired,\r\n link: PropTypes.string.isRequired,\r\n }).isRequired,\r\n counter: PropTypes.number.isRequired,\r\n };\r\n\r\n \/\/ ...\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\nHere\u2019s the rule:<\/p>\n