{"id":236,"date":"2019-10-25T03:23:40","date_gmt":"2019-10-25T03:23:40","guid":{"rendered":"http:\/\/larrybuffaloboy.com\/?p=236"},"modified":"2019-10-25T03:23:57","modified_gmt":"2019-10-25T03:23:57","slug":"state-vs-props-in-react","status":"publish","type":"post","link":"https:\/\/larrybuffaloboy.com\/index.php\/2019\/10\/25\/state-vs-props-in-react\/","title":{"rendered":"State vs Props in React"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"236\" class=\"elementor elementor-236\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t<div class=\"elementor-inner\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-abf685c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"abf685c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e465ae3\" data-id=\"e465ae3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0cf2688 elementor-widget elementor-widget-text-editor\" data-id=\"0cf2688\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>I am just beginning to wrap my head around state and props in react components. Admittedly it kept me from using react for a long time, but the react main concepts section in their documentation is written very well. So far all their documentation has been useful and easy to read. Reading through helped me understand the component lifestyle and instantiation.\u00a0\u00a0\u00a0<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-10d0a34 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"10d0a34\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4f5b43c\" data-id=\"4f5b43c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5e0cd60 elementor-widget elementor-widget-text-editor\" data-id=\"5e0cd60\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>\u00a0<\/p><div style=\"-en-clipboard: true;\">React is built with components, all working together to create the web page. Each component is tied in with one another through parent\/child relationships. When calling a child component you can pass in what are known as props or properties, variables passed to the component from the parent. The child component then is able to access those variables to render their content. State on the other hand is a variable created and managed by the component itself. State is locally scoped to the component, and when the state is updated, the component will update as well. The difference between state and props is that state cannot be accessed or modified by outside components.<\/div>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-06164e2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"06164e2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c6b77f1\" data-id=\"c6b77f1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-16722fa elementor-widget elementor-widget-heading\" data-id=\"16722fa\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Best Practices<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07233c2 elementor-widget elementor-widget-text-editor\" data-id=\"07233c2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>A few best practices I have gathered, is that a component must never modify it&#8217;s own props. We want the component to render the same content each time the same props are used. We want to create as many &#8216;pure components&#8217; as possible for performance and cleanliness. So when it comes to state, we only use it when we have to. When state is used we need to modify it directly using setState({ \/* *\/ }), so that our component will update. We use &#8216;stateless&#8217; components for mostly display components, and components that will not need to be altered.\u00a0\u00a0<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>What are props and state in react, and how are they used? What are best practices for building components and passing data.<\/p>\n","protected":false},"author":1,"featured_media":238,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/posts\/236"}],"collection":[{"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":2,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"predecessor-version":[{"id":239,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/posts\/236\/revisions\/239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/media\/238"}],"wp:attachment":[{"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}