![](\"\/img\/articles\/prop-types-destructuring.png\")
<\/p>\n<\/p>\n
At times one may be justified\u00a0in the argument that cognitive (over)load<\/a> is just an expected part of the overall developer experience. Fortunately, there are numerous\u00a0steps we\u00a0can take to minimize the general noise which\u00a0tends to distract\u00a0our intended focus. One particularly simple\u00a0– yet effective – example\u00a0is to remove unnecessary redundancy\u00a0wherever possible. In doing so, we afford both our peers and ourselves\u00a0a codebase which, over time, becomes considerably easier to maintain.<\/p>\n For instance, when performing code reviews, more often than not I tend to see considerable redundancy when specifying React PropTypes<\/a>. Typically, something along the lines of:<\/p>\n As can be seen, with each new prop we are redundantly referencing React PropType lookup paths. And, while the ideal components will have a limited number of props (either connected directly, or passed down), the redundancy still remains for any component which references the same prop type.\u00a0Considering the number of components a given application may contain, we can rightfully assume that the above redundancy will grow proportionally.<\/p>\n With the above in mind, we can easily reduce the redundancy (as well as micro-optimize the lookup paths) be simply destructuring<\/a> the props of interest as follows:<\/p>\n While I would consider the above to be simplified enough; one\u00a0could also take this\u00a0a step further and destructure the “`isRequired“` props, which, in some circumstances, may be useful as well:<\/p>\n Admittedly, this example is rather straight-forward; however, it does help to emphasize the point that only through consistent\u00a0vigilance can we ensure\u00a0our source will\u00a0continue to evolve organically while remaining as simple as possible.<\/p>\n","protected":false},"excerpt":{"rendered":" At times one may be justified\u00a0in the argument that cognitive (over)load is just an expected part of the overall developer experience. Fortunately, there are numerous\u00a0steps we\u00a0can take to minimize the general noise which\u00a0tends to distract\u00a0our intended focus. One particularly simple\u00a0– yet effective – example\u00a0is to remove unnecessary redundancy\u00a0wherever possible. In doing so, we afford both our peers and ourselves\u00a0a codebase… Continue Reading<\/a><\/p>\n","protected":false},"author":641,"featured_media":8391,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[44,23,246,78,201,244,45],"tags":[235,297,261,296,278],"class_list":["post-7335","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-review","category-design-patterns","category-es6","category-javascript-2","category-quick-tips","category-react","category-refactoring","tag-code-review","tag-destructuring","tag-es6","tag-proptypes","tag-react"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.ericfeminella.com\/blog\/wp-content\/uploads\/2017\/04\/prop-types-destructuring.png?fit=718%2C320&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/7335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/users\/641"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/comments?post=7335"}],"version-history":[{"count":0,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/7335\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/media\/8391"}],"wp:attachment":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/media?parent=7335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/categories?post=7335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/tags?post=7335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}import React from 'react';\nimport PropTypes from 'prop-types';\n\n\/* import React, {PropTypes} from 'react'; \/\/ react < v.15.5 *\/\n...\n\nLoginForm.propTypes = {\n validate : PropTypes.func.isRequired,\n authenticate : PropTypes.func.isRequired,\n persistCredentials : PropTypes.func.isRequired,\n fetching : PropTypes.bool.isRequired,\n rememberMe : PropTypes.bool.isRequired,\n username : PropTypes.string, \n password : PropTypes.string,\n muiTheme : PropTypes.object,\n errors : PropTypes.object\n}\n...<\/pre>\n...\nconst {func, object, string, bool} = PropTypes;\n\nLoginForm.propTypes = {\n validate : func.isRequired,\n authenticate : func.isRequired,\n persistCredentials : func.isRequired,\n fetching : bool.isRequired,\n rememberMe : bool.isRequired,\n username : string,\n password : string,\n muiTheme : object,\n errors : object\n}\n...<\/pre>\n...\nconst {\n func: {isRequired:funcReq}, \n bool: {isRequired:boolReq},\n object, \n string\n} = PropTypes;\n\nLoginForm.propTypes = {\n validate : funcReq,\n authenticate : funcReq,\n persistCredentials : funcReq,\n fetching : boolReq,\n rememberMe : boolReq,\n username : string,\n password : string,\n muiTheme : object,\n errors : object\n}\n...<\/pre>\n