{"id":733,"date":"2024-02-02T09:40:55","date_gmt":"2024-02-02T09:40:55","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=733"},"modified":"2024-02-05T11:09:47","modified_gmt":"2024-02-05T11:09:47","slug":"componentdidmount-componentdidupdate-and-componentwillunmount-in-react-js","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/componentdidmount-componentdidupdate-and-componentwillunmount-in-react-js\/","title":{"rendered":"componentDidMount, componentDidUpdate, and componentWillUnmount in React.js"},"content":{"rendered":"\n<p>Certainly! <code>componentDidMount<\/code>, <code>componentDidUpdate<\/code>, and <code>componentWillUnmount<\/code> are lifecycle methods in class components of React. They are used to perform certain actions at different stages of the component lifecycle.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>componentDidMount:<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>componentDidMount<\/code> is invoked immediately after a component is mounted (i.e., inserted into the DOM tree). This method is commonly used to perform initialization tasks, such as data fetching, setting up subscriptions, or initializing third-party libraries. Example:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>   class MyComponent extends React.Component {\n       componentDidMount() {\n           \/\/ Perform initialization tasks here\n           console.log('Component is mounted');\n       }\n\n       render() {\n           return &lt;div&gt;My Component&lt;\/div&gt;;\n       }\n   }<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li><strong>componentDidUpdate:<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>componentDidUpdate<\/code> is invoked immediately after updating occurs. This method is called after the component&#8217;s updates are flushed to the DOM. It&#8217;s commonly used to perform side effects in response to prop or state changes, such as updating the DOM or fetching new data based on the updated state or props. Example:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>   class MyComponent extends React.Component {\n       componentDidUpdate(prevProps, prevState) {\n           \/\/ Perform side effects after updates\n           console.log('Component updated');\n       }\n\n       render() {\n           return &lt;div&gt;My Component&lt;\/div&gt;;\n       }\n   }<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li><strong>componentWillUnmount:<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>componentWillUnmount<\/code> is invoked immediately before a component is unmounted and destroyed. This method is commonly used to perform cleanup tasks, such as unsubscribing from subscriptions, cancelling timers, or releasing resources to prevent memory leaks. Example:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>   class MyComponent extends React.Component {\n       componentWillUnmount() {\n           \/\/ Perform cleanup tasks before unmounting\n           console.log('Component will unmount');\n       }\n\n       render() {\n           return &lt;div&gt;My Component&lt;\/div&gt;;\n       }\n   }<\/code><\/pre>\n\n\n\n<p>While class components use these lifecycle methods, functional components can achieve similar behavior using the <code>useEffect<\/code> hook. The equivalent behavior for <code>componentDidMount<\/code> can be achieved with <code>useEffect<\/code> with an empty dependency array (<code>[]<\/code>). For <code>componentDidUpdate<\/code>, you can use <code>useEffect<\/code> with dependencies. And for <code>componentWillUnmount<\/code>, you can return a cleanup function from the <code>useEffect<\/code> callback.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Certainly! componentDidMount, componentDidUpdate, and componentWillUnmount are lifecycle methods in class components of React. They are used to perform certain actions<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-733","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=733"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/733\/revisions"}],"predecessor-version":[{"id":734,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/733\/revisions\/734"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}