{"id":7194,"date":"2019-06-15T09:05:41","date_gmt":"2019-06-15T09:05:41","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7194"},"modified":"2019-06-15T09:06:35","modified_gmt":"2019-06-15T09:06:35","slug":"react-pure-component","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/react-pure-component\/","title":{"rendered":"React pure component"},"content":{"rendered":"<p>I&#8217;m using the Airbnb style guide with eslint and one warning mentioned that a very simple Component subclass with no properties or state but it just has a render method, should probably be written as a pure component. <\/p>\n<p>Below is an example of a pure component in it&#8217;s most simplistic and minimal form.<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport React, { ReactElement } from 'react';\r\n\r\nconst MyButton = (): ReactElement =&gt; (\r\n  &lt;div&gt;My Button&lt;\/div&gt;\r\n);\r\n\r\nexport default MyButton;\r\n<\/pre>\n<p>React also comes with a <a href=\"https:\/\/reactjs.org\/docs\/react-api.html#reactpurecomponent\" rel=\"noopener noreferrer\" target=\"_blank\">PureComponent<\/a> base class, hence we could write<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nclass MyButton extends React.PureComponent {\r\n   render() {\r\n      &lt;div&gt;My Button&lt;\/div&gt;\r\n   }\r\n}\r\n<\/pre>\n<p>This is slightly different to our function version of a pure component in that it also handles properties and state, see the <a href=\"https:\/\/reactjs.org\/docs\/react-api.html#reactpurecomponent\" rel=\"noopener noreferrer\" target=\"_blank\">documentation<\/a> for more information.<\/p>\n<p>In both cases, these changes from a standard React Component result in performance increases, so very much worth baring in mind if your components are able to be written in these ways.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m using the Airbnb style guide with eslint and one warning mentioned that a very simple Component subclass with no properties or state but it just has a render method, should probably be written as a pure component. Below is an example of a pure component in it&#8217;s most simplistic and minimal form. import React, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243],"tags":[],"class_list":["post-7194","post","type-post","status-publish","format-standard","hentry","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7194"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7194\/revisions"}],"predecessor-version":[{"id":7212,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7194\/revisions\/7212"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}