{"id":1096,"date":"2023-03-02T23:18:43","date_gmt":"2023-03-03T07:18:43","guid":{"rendered":"http:\/\/www.tech.dimprash.com\/?p=1096"},"modified":"2023-03-02T23:18:43","modified_gmt":"2023-03-03T07:18:43","slug":"react-lifecycle-of-components","status":"publish","type":"post","link":"http:\/\/www.tech.dimprash.com\/?p=1096","title":{"rendered":"React: Lifecycle of Components"},"content":{"rendered":"<p>Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component\u2019s existence.\u00a0 A React Component can go through four stages of its life as follows.<\/p>\n<ul>\n<li><strong>Initialization:<\/strong> This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.<\/li>\n<li><strong>Mounting:<\/strong> Mounting is the stage of rendering the JSX returned by the render method itself.<\/li>\n<li><strong>Updating:<\/strong> Updating is the stage when the state of a component is updated and the application is repainted.<\/li>\n<li><strong>Unmounting:<\/strong> As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.<\/li>\n<\/ul>\n<p><strong>Mounting:<\/strong>\u00a0 componentWillMount() ==&gt; render() ==&gt; componentDidMount()<\/p>\n<p><strong>Updating:<\/strong><\/p>\n<p>componentWillReceiveProps() \/ setState() &#8211;&gt;<\/p>\n<p>shouldComponentUpdate() &#8211;&gt; componentWillUpdate() &#8211;&gt; render() &#8211;&gt; componentDidUpdate()<\/p>\n<p><strong>UnMounting: <\/strong><\/p>\n<p>componentWillUnmount()<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component\u2019s existence.\u00a0 A React Component can go through four stages of its life as follows. Initialization: This is the stage where the component is constructed with &hellip; <a href=\"http:\/\/www.tech.dimprash.com\/?p=1096\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">React: Lifecycle of Components<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-1096","post","type-post","status-publish","format-standard","hentry","category-react"],"_links":{"self":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts\/1096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1096"}],"version-history":[{"count":1,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts\/1096\/revisions"}],"predecessor-version":[{"id":1097,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts\/1096\/revisions\/1097"}],"wp:attachment":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1096"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}