{"id":282,"date":"2021-01-09T03:37:55","date_gmt":"2021-01-09T03:37:55","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=282"},"modified":"2021-01-09T04:01:17","modified_gmt":"2021-01-09T04:01:17","slug":"react-lifecycle-methods-componentdidmount","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/","title":{"rendered":"React Lifecycle Methods: ComponentDidMount"},"content":{"rendered":"\n

The componentDidMount() lifecycle method is called immediately after a component is mounted or, in simple terms, when that particular component or page is in use or in focus or in the DOM.<\/p>\n\n\n\n

You can then decide what should happen when that page loads. If you’re fetching data from a remote endpoint or your application’s functionality relies heavily on this type of data, componentDidMount() is a good place to instantiate your network request.<\/p>\n\n\n\n

Mounting a Component<\/h3>\n\n\n\n

When mounting a component, there are about four (4) in-built methods that get called in a particular order. These are:<\/p>\n\n\n\n

  1. constructor()<\/li>
  2. getDerivedStateFromProps()<\/li>
  3. render()<\/li>
  4. componentDidMount()<\/li><\/ol>\n\n\n\n

    constructor()<\/h3>\n\n\n\n

    The constructor method is the first that’s called before anything else in your React Component, and this is where initial states are usually set up for use by the application.<\/p>\n\n\n\n

    The constructor method is called with props<\/strong> passed in as a parameter and is always immediately followed by super before anything else is passed. This is done so that the parent’s constructor method can be initiated and will also allow the component to inherit methods from its parents.<\/p>\n\n\n\n

    \n
    begin your react js journey<\/a><\/div>\n<\/div>\n\n\n\n

    Here’s an illustration<\/h3>\n\n\n\n
    class YourClassName extends Component{\nconstructor(props){\nsuper(props){\nthis.state = {\nname: 'Lawson Luke'\n}\n}\n}\n\nrender(){\nreturn(\n<div>\n<p>My name is {this.state.name} <\/p>\n<\/div>\n)\n}\n}\n\nexport default YourClassName;<\/code><\/pre>\n\n\n\n
    getDerivedStateFromProps()<\/h3>\n\n\n\n
    The getDerivedStateFromProps()<\/code> method is called just before rendering the element(s) in the DOM.<\/p>\n\n\n\n
    This is usually where you update or set your state based on the initial value of the props.<\/p>\n\n\n\n
     static getDerivedStateFromProps(props, state) {\n    return {name: props.newName };\n  }<\/code><\/pre>\n\n\n\n
    render()<\/h3>\n\n\n\n
    The render() method is only required in a class component. When called, it examines the values you’ve passed into this.props, this.state<\/em><\/strong> and just outputs your HTML result or the results of your code.<\/p>\n\n\n\n
    componentDidMount()<\/h3>\n\n\n\n
    This is called after the component is rendered or is available in the DOM. You may want to perform some logic here like, for example, set state value.<\/p>\n\n\n\n
    class YourClassName extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {name: \"Lawson Luke\"};\n  } \ncomponentDidMount() {\n    setTimeout(() => {\n      this.setState({name: \"Matt Hendrik\"})\n    }, 1000)\n  }\nrender() {\n    return (\n      <h1>My name is {this.state.name}<\/h1>\n    );\n  }\n\nexport default YourClassName<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    The componentDidMount() lifecycle method is called immediately after a component is mounted or, in simple terms, when that<\/p>\n","protected":false},"author":1,"featured_media":284,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[73],"tags":[],"class_list":["post-282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js"],"yoast_head":"\nReact Lifecycle Methods: ComponentDidMount<\/title>\n<meta name=\"description\" content=\"The ComponentDidMount lifecycle method is called immediately after a component is mounted or, in simple terms, when that particular ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Lifecycle Methods: ComponentDidMount\" \/>\n<meta property=\"og:description\" content=\"The ComponentDidMount lifecycle method is called immediately after a component is mounted or, in simple terms, when that particular ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/codeflretech\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-09T03:37:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-09T04:01:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1242\" \/>\n\t<meta property=\"og:image:height\" content=\"708\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"codeflare\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeflaretech\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/\"},\"author\":{\"name\":\"codeflare\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\"},\"headline\":\"React Lifecycle Methods: ComponentDidMount\",\"datePublished\":\"2021-01-09T03:37:55+00:00\",\"dateModified\":\"2021-01-09T04:01:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/\"},\"wordCount\":288,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/react.png\",\"articleSection\":[\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/\",\"name\":\"React Lifecycle Methods: ComponentDidMount\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/react.png\",\"datePublished\":\"2021-01-09T03:37:55+00:00\",\"dateModified\":\"2021-01-09T04:01:17+00:00\",\"description\":\"The ComponentDidMount lifecycle method is called immediately after a component is mounted or, in simple terms, when that particular ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/react.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/react.png\",\"width\":1242,\"height\":708,\"caption\":\"react lifecycle methods\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-lifecycle-methods-componentdidmount\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"react js\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-js\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React Lifecycle Methods: ComponentDidMount\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\",\"name\":\"codeflare\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"caption\":\"codeflare\"},\"description\":\"Latest tech news and coding tips.\",\"sameAs\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\",\"https:\\\/\\\/facebook.com\\\/codeflretech\",\"https:\\\/\\\/instagram.com\\\/codeflaretech\",\"https:\\\/\\\/x.com\\\/codeflaretech\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1\"],\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/watcher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Lifecycle Methods: ComponentDidMount","description":"The ComponentDidMount lifecycle method is called immediately after a component is mounted or, in simple terms, when that particular ...","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:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/","og_locale":"en_US","og_type":"article","og_title":"React Lifecycle Methods: ComponentDidMount","og_description":"The ComponentDidMount lifecycle method is called immediately after a component is mounted or, in simple terms, when that particular ...","og_url":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/","article_author":"https:\/\/facebook.com\/codeflretech","article_published_time":"2021-01-09T03:37:55+00:00","article_modified_time":"2021-01-09T04:01:17+00:00","og_image":[{"width":1242,"height":708,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react.png","type":"image\/png"}],"author":"codeflare","twitter_card":"summary_large_image","twitter_creator":"@codeflaretech","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/"},"author":{"name":"codeflare","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a"},"headline":"React Lifecycle Methods: ComponentDidMount","datePublished":"2021-01-09T03:37:55+00:00","dateModified":"2021-01-09T04:01:17+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/"},"wordCount":288,"commentCount":0,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react.png","articleSection":["react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/","url":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/","name":"React Lifecycle Methods: ComponentDidMount","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react.png","datePublished":"2021-01-09T03:37:55+00:00","dateModified":"2021-01-09T04:01:17+00:00","description":"The ComponentDidMount lifecycle method is called immediately after a component is mounted or, in simple terms, when that particular ...","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react.png","width":1242,"height":708,"caption":"react lifecycle methods"},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/react-lifecycle-methods-componentdidmount\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"react js","item":"https:\/\/codeflarelimited.com\/blog\/react-js\/"},{"@type":"ListItem","position":3,"name":"React Lifecycle Methods: ComponentDidMount"}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a","name":"codeflare","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","caption":"codeflare"},"description":"Latest tech news and coding tips.","sameAs":["https:\/\/codeflarelimited.com\/blog","https:\/\/facebook.com\/codeflretech","https:\/\/instagram.com\/codeflaretech","https:\/\/x.com\/codeflaretech","https:\/\/www.youtube.com\/channel\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1"],"url":"https:\/\/codeflarelimited.com\/blog\/author\/watcher\/"}]}},"jetpack_featured_media_url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=282"}],"version-history":[{"count":4,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/282\/revisions"}],"predecessor-version":[{"id":289,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/282\/revisions\/289"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/284"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}