{"id":4379,"date":"2018-05-09T17:32:37","date_gmt":"2018-05-09T12:02:37","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=4379"},"modified":"2018-05-09T17:32:37","modified_gmt":"2018-05-09T12:02:37","slug":"react-component-lifecycle","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/","title":{"rendered":"React Component Lifecycle"},"content":{"rendered":"

All the react component goes through a lifecycle which enables you to perform a specific task at any specific time. In order to achieve that you can override the life cycle methods. Methods prefixed with will<\/strong>\u00a0are called right before something occurs (events), and methods prefixed with did<\/strong>\u00a0are called right after something occurs.<\/p>\n

Let us understand all the functions in all the phases of life cycle :<\/p>\n

setup props and state(constructor<\/span>(<\/span>props)<\/span><\/code><\/strong>)<\/strong><\/p>\n

You all must be heard about the constructor . Constructors are the basic of OOP\u200a. It is the first function which will be called whenever a new object is created even it is called before the component is mounted. One thing should be noted that before any lines of statement ,you should call\u00a0super(props)<\/code>\u00a0in order to use\u00a0this.props<\/code>.It will call the constructor of parent in order to avail “props” to our constructor.<\/p>\n

This is also the only place where you are expected to change\/set the state by directly overwriting the\u00a0this.state<\/code>\u00a0fields. In all other instances remember to use\u00a0this.setState.<\/code><\/p>\n

componentWillMount(componentWillMount<\/span>(<\/span>)<\/span><\/code><\/strong>)<\/strong><\/p>\n

It is depricated.\u00a0<\/em>It is not that much different from constructor. It is invoked just before mounting occurs. It is called before\u00a0render()<\/code>, therefore calling\u00a0setState()<\/code>\u00a0synchronously in this method will not trigger an extra rendering. But It is recommended to use constructor for the same.<\/p>\n

render(render<\/span>(<\/span>)<\/span><\/code><\/strong>)<\/strong><\/p>\n

Among all the React developers , render() is most famous.\u00a0\u00a0We create Elements (generally via JSX) and return them.\u00a0We access the Component via\u00a0this.props<\/code>\u00a0and\u00a0this.state<\/code>\u00a0and these values tells about how content should be generated. Any changes we made\u00a0 during\u00a0\u00a0componentWillMount()<\/code>\u00a0are fully applied for\u00a0this.state.<\/code><\/p>\n

render() must not allow to modify component state, it returns the same result each time it\u2019s invoked, and it does not directly interact with the browser. If you need to interact with the browser, perform your work in\u00a0other lifecycle methods.<\/p>\n

componentDidMount(componentDidMount<\/span>(<\/span>)<\/span><\/code><\/strong>)<\/strong><\/p>\n

componentDidMount()<\/code>\u00a0is invoked just after the mounting of a component.\u00a0Statements that requires the DOM i.e which need the UI to be rendered should be kept here. Don’t use\u00a0setState()<\/code>\u00a0in this method, as it will trigger an extra rendering\u00a0. Though the user will not see the extra rendering but it will cause the performance issue.<\/p>\n

componentWillReceiveProps(componentWillReceiveProps<\/span>(<\/span>nextProps)<\/span><\/code>)<\/strong><\/p>\n

It is depricated.\u00a0<\/em>componentWillReceiveProps()<\/code>\u00a0is invoked before a component receives new props. In this method you can compare the previous props with the newer one and based on that you can change the state and other updates<\/p>\n

Calling\u00a0this.setState()\u00a0<\/code>doesn\u2019t trigger\u00a0componentWillReceiveProps()<\/code>.<\/p>\n

shouldComponentUpdate(shouldComponentUpdate<\/span>(<\/span>nextProps,<\/span> nextState)<\/span><\/code><\/strong>)<\/strong><\/p>\n

This can be used to let\u00a0\u00a0React know if a component\u2019s output is affected by the current change in state or props. Talking about the default behavious of this fuction, it will\u00a0re-render on every state change.<\/p>\n

This method is not called for the initial render. If this method returns\u00a0false<\/code>, then\u00a0componentWillUpdate()<\/code>,\u00a0render()<\/code>, and\u00a0componentDidUpdate()<\/code>\u00a0will not be invoked.<\/p>\n

It is not recommend doing deep checks or using\u00a0JSON.stringify()<\/code>\u00a0in\u00a0shouldComponentUpdate()<\/code>. It will degrade the performance badly.<\/p>\n

componentWillUpdate(componentWillUpdate<\/span>(<\/span>nextProps,<\/span> nextState)<\/span><\/code><\/strong>)<\/strong><\/p>\n

This method is invoked just before rendering when new props or state are being received.\u00a0This method is not called for the initial render. You can do the stuffs required before updation occurs<\/p>\n

This method is only invoked if shouldComponentUpdate() will be invoked.<\/p>\n

componentDidUpdate(componentDidUpdate<\/span>(<\/span>prevProps,<\/span> prevState,<\/span> snapshot)<\/span><\/code><\/strong>)<\/strong><\/p>\n

This method is invoked just after updation occurs. This method is not called for the initial render.\u00a0Statements that requires the DOM i.e which is needed after UI is updated should be kept here. It is the place where you can do the server call after comparing current and previous props.<\/p>\n

componentWillUnmount(componentWillUnmount<\/span>(<\/span>)<\/span><\/code><\/strong>)<\/strong><\/p>\n

It is the method which is invoked immediately before a component is unmounted and destroyed. you can write the statements to cleanup any resource.<\/p>\n

 <\/p>\n

We can understand it with the help of example. Here we are setting the initial state inside of the constructor.\u00a0The\u00a0setDigit<\/b>\u00a0is used to update the\u00a0state<\/b>.<\/p>\n

App.js<\/strong><\/em><\/p>\n

import React from 'react';\r\nimport Content from '.\/Content';\r\nclass App extends React.Component {\r\n   constructor(props) {\r\n      super(props);\r\n      \r\n      this.state = {\r\n         myDigit: 0\r\n      }\r\n      this.setDigit = this.setNewNumber.bind(this)\r\n   };\r\n   setNewNumber() {\r\n      this.setState({myDigit: this.state.myDigit + 1})\r\n   }\r\n   render() {\r\n      return (\r\n         <div>\r\n            <button onClick = {this.setDigit}>INCREMENT<\/button>\r\n            <Content sentDigit = {this.state.data}><\/Content>\r\n         <\/div>\r\n      );\r\n   }\r\n}\r\nexport default App;\r\n<\/pre>\n
Content.js<\/strong><\/em><\/p>\n
import React from 'react'\r\nclass Content extends React.Component {\r\n   componentWillMount() {\r\n      console.log('Component WILL MOUNT!')\r\n   }\r\n   componentDidMount() {\r\n      console.log('Component DID MOUNT!')\r\n   }\r\n   componentWillReceiveProps(newProps) {    \r\n      console.log('Component WILL RECIEVE PROPS!')\r\n   }\r\n   shouldComponentUpdate(newProps, newState) {\r\n      return true;\r\n   }\r\n   componentWillUpdate(nextProps, nextState) {\r\n      console.log('Component WILL UPDATE!');\r\n   }\r\n   componentDidUpdate(prevProps, prevState) {\r\n      console.log('Component DID UPDATE!')\r\n   }\r\n   componentWillUnmount() {\r\n      console.log('Component WILL UNMOUNT!')\r\n   }\r\n   render() {\r\n      return (\r\n         <div>\r\n            <h1>{this.props.sentDigit}<\/h1>\r\n         <\/div>\r\n      );\r\n   }\r\n}\r\nexport default Content<\/pre>\n
Main.js<\/strong><\/em><\/p>\n
import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport App from '.\/App.jsx';\r\n\r\nReactDOM.render(<App\/>, document.getElementById('app'));\r\n\r\nsetTimeout(() => {\r\n   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 5000);<\/pre>\n
After initial rendering, the screen will be-<\/p>\n
\"\"<\/p>\n
and the console will be<\/p>\n
Component WILL MOUNT!\r\nComponent DID MOUNT!<\/pre>\n
After clicking\u00a0INCREMENT<\/b>\u00a0button, the updation will call other lifecycle methods.<\/p>\n
Component WILL RECEIVE PROPS!\r\nComponent WILL UPDATE!\r\nComponent DID UPDATE!<\/pre>\n
And after 5 seconds,\u00a0the component will unmount and the log will be<\/p>\n
Component WILL UNMOUNT!<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
All the react component goes through a lifecycle which enables you to perform a specific task at any specific time. In order to achieve that you can override the life cycle methods. Methods prefixed with will\u00a0are called right before something occurs (events), and methods prefixed with did\u00a0are called right after something occurs. Let us understand […]<\/p>\n","protected":false},"author":1,"featured_media":4435,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[257,258],"tags":[247,259,260],"class_list":["post-4379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-web-technology","tag-react","tag-web","tag-web-technologies"],"yoast_head":"\nReact Component Lifecycle - 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\/react-component-lifecycle\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Component Lifecycle - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"All the react component goes through a lifecycle which enables you to perform a specific task at any specific time. In order to achieve that you can override the life cycle methods. Methods prefixed with will\u00a0are called right before something occurs (events), and methods prefixed with did\u00a0are called right after something occurs. Let us understand […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-09T12:02:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/05\/React-Compnonent-Lifecycle-final.png\" \/>\n\t<meta property=\"og:image:width\" content=\"777\" \/>\n\t<meta property=\"og:image:height\" content=\"650\" \/>\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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"React Component Lifecycle\",\"datePublished\":\"2018-05-09T12:02:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/\"},\"wordCount\":668,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/React-Compnonent-Lifecycle-final.png\",\"keywords\":[\"react\",\"Web\",\"Web Technologies\"],\"articleSection\":[\"React\",\"Web Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/\",\"name\":\"React Component Lifecycle - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/React-Compnonent-Lifecycle-final.png\",\"datePublished\":\"2018-05-09T12:02:37+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/React-Compnonent-Lifecycle-final.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/React-Compnonent-Lifecycle-final.png\",\"width\":777,\"height\":650},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-component-lifecycle\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Component Lifecycle\"}]},{\"@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":"React Component Lifecycle - 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\/react-component-lifecycle\/","og_locale":"en_US","og_type":"article","og_title":"React Component Lifecycle - InnovationM - Blog","og_description":"All the react component goes through a lifecycle which enables you to perform a specific task at any specific time. In order to achieve that you can override the life cycle methods. Methods prefixed with will\u00a0are called right before something occurs (events), and methods prefixed with did\u00a0are called right after something occurs. Let us understand […]","og_url":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/","og_site_name":"InnovationM - Blog","article_published_time":"2018-05-09T12:02:37+00:00","og_image":[{"width":777,"height":650,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/05\/React-Compnonent-Lifecycle-final.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"React Component Lifecycle","datePublished":"2018-05-09T12:02:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/"},"wordCount":668,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/05\/React-Compnonent-Lifecycle-final.png","keywords":["react","Web","Web Technologies"],"articleSection":["React","Web Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/","url":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/","name":"React Component Lifecycle - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/05\/React-Compnonent-Lifecycle-final.png","datePublished":"2018-05-09T12:02:37+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/05\/React-Compnonent-Lifecycle-final.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/05\/React-Compnonent-Lifecycle-final.png","width":777,"height":650},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/react-component-lifecycle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Component Lifecycle"}]},{"@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\/4379","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=4379"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/4379\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/4435"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=4379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=4379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=4379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}