{"id":6316,"date":"2020-10-20T14:10:37","date_gmt":"2020-10-20T08:40:37","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6316"},"modified":"2020-10-20T14:10:37","modified_gmt":"2020-10-20T08:40:37","slug":"lifecycle-methods","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/","title":{"rendered":"Lifecycle Methods"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Today we are going to discuss React life cycle methods. What are the <\/span><span style=\"font-weight: 400;\">lifecycle methods and how these lifecycle methods work?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let&#8217;s start by creating a basic component (say Hello world) which we all have <\/span><span style=\"font-weight: 400;\">created as a beginner.<\/span><\/p>\n<pre class=\"lang:default decode:true \">class HelloWorld extends React.Component {\r\n\r\n\u00a0\u00a0\u00a0 \u00a0 render() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0 return &lt;h1&gt; Hello World &lt;\/h1&gt;\u00a0\r\n\r\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/pre>\n<p><span style=\"font-weight: 400;\">When this component is rendered and viewed on the browser. it will show\u00a0 <\/span><span style=\"font-weight: 400;\">&#8220;Hello World&#8221;\u00a0<\/span><span style=\"font-weight: 400;\">in the browser. But did we notice something that this component goes through <\/span><span style=\"font-weight: 400;\">some phase before it is rendered or shown in the browser? This phase is known <\/span><span style=\"font-weight: 400;\">as &#8220;mounting&#8221; phase.\u00a0<\/span><\/p>\n<p>Mounting Phase: In this phase, a component is created and inserted into the DOM. This is the <span style=\"font-weight: 400;\">first phase-out of all the phase (will discuss as we proceed) our newly<\/span><span style=\"font-weight: 400;\"> component goes through. P<\/span><span style=\"font-weight: 400;\">oint to remember in this phase a component is created and is shown up in the <\/span><span style=\"font-weight: 400;\">browser. <\/span><span style=\"font-weight: 400;\">Now, this doesn&#8217;t stop here, as our app grows ours react component grows\/change <\/span><span style=\"font-weight: 400;\">due to this comes to the next phase i.e Updating phase. The result of the component <\/span><span style=\"font-weight: 400;\">which is shown in the browser and is part of DOM will only change when there is a <\/span><span style=\"font-weight: 400;\">change in either &#8220;state&#8221; or &#8220;props&#8221;. This phase is the most interacting phase <\/span><span style=\"font-weight: 400;\">of any applicating during its lifecycle will discuss in detail below.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As any life cycle in react also the component is created(mounting) updated so <\/span><span style=\"font-weight: 400;\">definitely it has to die (when no longer needed) this is unmounting phase.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this phase, the component dies or is removed from DOM. <\/span><span style=\"font-weight: 400;\">That&#8217;s all we need to know in basic in the component lifecycle.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now its time to understand each phase and their methods in details.<\/span><\/p>\n<ul>\n<li>\n<h3><strong>Mounting Phase:<\/strong><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">As we know in this phase component is created and inserted into the DOM. F<\/span><span style=\"font-weight: 400;\">ollowing methods are called in order.<\/span><\/p>\n<ol>\n<li><strong> constructor()<\/strong><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">\u00a0This is the very first method which is called in the mounting phase or before <\/span><span style=\"font-weight: 400;\">the component is mounted into the DOM.<\/span><span style=\"font-weight: 400;\">\u00a0 We usually initialise state or bind our handler methods within this method.\u00a0<\/span><\/p>\n<pre class=\"lang:default decode:true \">class HelloWorld extends React.Component {\r\n\r\n\u00a0\u00a0 \u00a0 constructor(props) {\r\n\r\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 super(props)\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0 this.state = {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 show: 0\r\n\r\n\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0 \u00a0 }\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">\u00a0 Just remember we need not introduce any side effect in this method.<\/span><\/p>\n<ol start=\"2\">\n<li><strong> static getDerivedStateFromProps()<\/strong><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">\u00a0getDerivedStateFromProps exists for only one purpose. It enables a<\/span><span style=\"font-weight: 400;\"> component to update its internal state as the result of changes in <\/span><span style=\"font-weight: 400;\">props. This method takes state and props as an argument. <\/span><span style=\"font-weight: 400;\">This method is invoked just before the render method means just before <\/span><span style=\"font-weight: 400;\">the component is rendered to the DOM.<\/span><\/p>\n<pre class=\"lang:default decode:true \">class HelloWorld extends React.Component {\r\n\r\n\u00a0 static getDerivedStateFromProps(props, state) {\r\n\r\n\u00a0 \/\/ write code here\r\n\r\n\u00a0 }\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">\u00a0Let&#8217;s understand this with an example. Consider a simple example of<\/span><span style=\"font-weight: 400;\"> &#8220;Hello World&#8221; that we discussed above let&#8217;s re-write it with little <\/span><span style=\"font-weight: 400;\">modification.<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<pre class=\"lang:default decode:true \">class HelloWorld extends React.Component {\r\n\r\nstate ={\r\n\r\n\u00a0 msg: 'Hello World'\r\n\r\n\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 \u00a0 render() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0 return &lt;h1&gt; {msg} &lt;\/h1&gt;\u00a0\r\n\r\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/pre>\n<p><span style=\"font-weight: 400;\">\u00a0What we expect the result of the above code.<\/span><span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><\/p>\n<p>&#8220;Hello World&#8221; in the browser.<\/p>\n<p><span style=\"font-weight: 400;\">Now if we add static getDerivedStateFromProps lifecycle <\/span><span style=\"font-weight: 400;\">method as below.<\/span><\/p>\n<pre class=\"lang:default decode:true \">class HelloWorld extends React.Component {\r\n\r\n\u00a0\u00a0 \u00a0 state = {\r\n\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0 msg: \"Hello World\"\r\n\r\n\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0 static getDerivedStateFromProps(props, state) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0 return {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0 msg: 'Hello World!!!!'\r\n\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0 }\r\n\r\n\u00a0\u00a0 }\r\n\r\nrender(){\r\n\r\nreturn &lt;h1&gt; {msg} &lt;\/h1&gt;\u00a0\r\n\r\n}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0}<\/pre>\n<p><span style=\"font-weight: 400;\">\u00a0We know from the above discussion this method is called before the <\/span><span style=\"font-weight: 400;\">component is mounted to the DOM. And it returns an object, we update<\/span><span style=\"font-weight: 400;\">\u00a0the state of the component just before the component is rendered.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> Result of above code is &#8220;Hello World!!!!&#8221; not &#8220;Hello World&#8221;.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With this method Updating the state before rendering doesn&#8217;t mean<\/span><span style=\"font-weight: 400;\"> we should go ahead and do this. <\/span><span style=\"font-weight: 400;\">This is one of the rarely used lifecycle methods.\u00a0<\/span><\/p>\n<ol start=\"3\">\n<li><strong> render()<\/strong><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0This is the third method in the component lifecycle (in mounting phase).<\/span><span style=\"font-weight: 400;\"> All the elements that we want to be a part of DOM are written inside the render<\/span><span style=\"font-weight: 400;\"> method. Basically, we write JSX(syntical sugar of HTML) inside the render method.<\/span><\/p>\n<pre class=\"lang:default decode:true \">class HelloWorld extends React.Component {\u00a0\r\n\r\n\u00a0\u00a0\u00a0 \u00a0 render() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0 \u00a0 return (\r\n\r\n&lt;div&gt;\r\n\r\n\u00a0 &lt;h1&gt; Hurray! &lt;\/h1&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n)\r\n\r\n\u00a0\u00a0\u00a0 \u00a0 }\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">\u00a0But this is not restricted we can also return the string, number or arrays.<\/span><\/p>\n<pre class=\"lang:default decode:true \">class HelloWorld extends React.Component {\u00a0\r\n\r\n\u00a0\u00a0\u00a0 \u00a0 render() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0 \u00a0 return \"HELLO !\"\r\n\r\n\u00a0\u00a0\u00a0 \u00a0 }\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">\u00a0This render method is called every time when there is a change in state\/props.<\/span><\/p>\n<ol start=\"4\">\n<li><strong> componentDidMount()<\/strong><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">When the render method is called. This method is invoked only once after the<\/span><span style=\"font-weight: 400;\"> component is mounted into the DOM. This is the right place to perform side <\/span><span style=\"font-weight: 400;\">effects. Also if we need to make a network request this is the right place <\/span><span style=\"font-weight: 400;\">because this is the first method after the component is mounted in the DOM.<\/span><\/p>\n<pre class=\"lang:default decode:true \">class HelloWorld extends React.Component {\r\n\r\ncomponentDidMount() {\r\n\r\n\u00a0 this.fetchListOfRequest() \/\/ where fetchListOfRequest initiates a network request.\u00a0\r\n\r\n}\r\n\r\n\u00a0\u00a0\u00a0}<\/pre>\n<p><span style=\"font-weight: 400;\">This is all about the mounting phase lifecycle methods.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now comes the next phase i.e updating phase.<\/span><\/p>\n<ul>\n<li>\n<h3><strong>Updating Phase :<\/strong><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">When there is a change in either state or props of a react component<\/span><span style=\"font-weight: 400;\"> that particular component re-render (as discussed above render method is<\/span><span style=\"font-weight: 400;\"> executed) and the component is updated result in updating phase of the lifecycle.<\/span><span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0Let&#8217;s discuss each method involved in this phase.<\/span><\/p>\n<ol>\n<li><strong> static getDerivedStateFromProps()<\/strong><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">This is the first method which is invoked in the updating phase. We have<\/span><span style=\"font-weight: 400;\"> already discussed it in the mounting phase. All explanation remains the same<\/span><span style=\"font-weight: 400;\"> so we will skip it.<\/span><span style=\"font-weight: 400;\"> Just point to note this method is invoked both in mounting and updating<\/span><span style=\"font-weight: 400;\"> phase.<\/span><\/p>\n<ol start=\"2\">\n<li><strong> shouldComponentUpdate().<\/strong><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">This method is invoked as soon as getDerivedStateFromProps is executed.<\/span><span style=\"font-weight: 400;\"> We know, we want our component to re-render when there is a change in state\/<\/span><span style=\"font-weight: 400;\">props. But, what if we want to have control over this behaviour that which<\/span><span style=\"font-weight: 400;\"> component is to be re-render. Then this is the method to be used.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This lifecycle method returns true or false which control the component <\/span><span style=\"font-weight: 400;\">render process returning true means component gets re-render and returning<\/span><span style=\"font-weight: 400;\"> false means component is not re-rendered. <\/span><span style=\"font-weight: 400;\">this lifecycle method is mostly used for performance optimisation as we all<\/span><span style=\"font-weight: 400;\"> know component rendering is the heaviest operations out of all operation<\/span><span style=\"font-weight: 400;\"> react performs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This method needs to be handled very wisely else it may cause some uneven <\/span><span style=\"font-weight: 400;\">behaviour of our application.<\/span><\/p>\n<ol start=\"3\">\n<li><strong> render()<\/strong><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">After the shouldComponentUpdate method is called, render is called <\/span><span style=\"font-weight: 400;\">immediately depending upon what shouldComponentUpdate method return <\/span><span style=\"font-weight: 400;\">by default it returns true, and if it returns false the component is not <\/span><span style=\"font-weight: 400;\">re-rendered.<\/span><span style=\"font-weight: 400;\"> There is not much to discuss as we already covered this in mounting phase.<\/span><\/p>\n<ol start=\"4\">\n<li><strong> getSnapshotBeforeUpdate()<\/strong><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">\u00a0getSnapshotBeforeUpdate lifecycle method is called just after the render <\/span><span style=\"font-size: 1rem;\">method is called. Like getDerivedStateStateFromProps, this method also <\/span><span style=\"font-size: 1rem;\">used rarely. <\/span><span style=\"font-weight: 400;\">This lifecycle method fetches some information from DOM and can change it <\/span><span style=\"font-size: 1rem;\">just after the update is made.<\/span><span style=\"font-weight: 400;\"> But we need to remember, that the value fetched from DOM by getSnapshotBeforeUpdate <\/span><span style=\"font-weight: 400;\">will refer value just before the DOM is updated even the render method was <\/span><span style=\"font-size: 1rem;\">called previously.<\/span><\/p>\n<ol start=\"5\">\n<li><strong> componentDidUpdate()<\/strong><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">This lifecycle method is invoked after getSnapshotbeforeUpdate is called.<\/span><span style=\"font-weight: 400;\"> This method receives prev props and state as an argument <\/span><span style=\"font-weight: 400;\">unMounting Phase.<\/span><span style=\"font-weight: 400;\"> \u00a0This is the last phase where the component is removed from DOM or die\u00a0<\/span><span style=\"font-size: 1rem;\">this phase is used as a cleanup activity to remove the component which <\/span><span style=\"font-size: 1rem;\">is no longer in use. Below are the following methods:<\/span><\/p>\n<ul>\n<li><strong style=\"font-size: 1rem;\">componentWillUnmount()<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The componentWillUnmount lifecycle method is invoked immediately before <\/span><span style=\"font-size: 1rem;\">a component is unmounted and destroyed. This is the ideal place to <\/span><span style=\"font-weight: 400;\">perform any necessary cleanup such as clearing up timers, cancelling <\/span><span style=\"font-weight: 400;\">network requests, or cleaning up any subscriptions that were created<\/span><span style=\"font-weight: 400;\"> in componentDidMount()<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is all-out different phases of component and its lifecycle method.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today we are going to discuss React life cycle methods. What are the lifecycle methods and how these lifecycle methods work? Let&#8217;s start by creating a basic component (say Hello world) which we all have created as a beginner. class HelloWorld extends React.Component { \u00a0\u00a0\u00a0 \u00a0 render() { \u00a0\u00a0\u00a0\u00a0 return &lt;h1&gt; Hello World &lt;\/h1&gt;\u00a0 \u00a0\u00a0\u00a0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[257],"tags":[14,547],"class_list":["post-6316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","tag-innovationm","tag-lifecycle-methods"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Lifecycle Methods - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lifecycle Methods - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Today we are going to discuss React life cycle methods. What are the lifecycle methods and how these lifecycle methods work? Let&#8217;s start by creating a basic component (say Hello world) which we all have created as a beginner. class HelloWorld extends React.Component { \u00a0\u00a0\u00a0 \u00a0 render() { \u00a0\u00a0\u00a0\u00a0 return &lt;h1&gt; Hello World &lt;\/h1&gt;\u00a0 \u00a0\u00a0\u00a0 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-20T08:40:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Lifecycle-Methods.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Lifecycle Methods\",\"datePublished\":\"2020-10-20T08:40:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/\"},\"wordCount\":1112,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Lifecycle-Methods.png\",\"keywords\":[\"InnovationM\",\"Lifecycle Methods\"],\"articleSection\":[\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/\",\"name\":\"Lifecycle Methods - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Lifecycle-Methods.png\",\"datePublished\":\"2020-10-20T08:40:37+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Lifecycle-Methods.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Lifecycle-Methods.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/lifecycle-methods\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lifecycle Methods\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lifecycle Methods - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/","og_locale":"en_US","og_type":"article","og_title":"Lifecycle Methods - InnovationM - Blog","og_description":"Today we are going to discuss React life cycle methods. What are the lifecycle methods and how these lifecycle methods work? Let&#8217;s start by creating a basic component (say Hello world) which we all have created as a beginner. class HelloWorld extends React.Component { \u00a0\u00a0\u00a0 \u00a0 render() { \u00a0\u00a0\u00a0\u00a0 return &lt;h1&gt; Hello World &lt;\/h1&gt;\u00a0 \u00a0\u00a0\u00a0 [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/","og_site_name":"InnovationM - Blog","article_published_time":"2020-10-20T08:40:37+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Lifecycle-Methods.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Lifecycle Methods","datePublished":"2020-10-20T08:40:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/"},"wordCount":1112,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Lifecycle-Methods.png","keywords":["InnovationM","Lifecycle Methods"],"articleSection":["React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/","url":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/","name":"Lifecycle Methods - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Lifecycle-Methods.png","datePublished":"2020-10-20T08:40:37+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Lifecycle-Methods.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Lifecycle-Methods.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/lifecycle-methods\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Lifecycle Methods"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6316"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6316\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6317"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}